:root {
  --mel-bg: #d8e9f3;
  --mel-surface: #ffffff;
  --mel-surface-soft: #f7fafc;
  --mel-primary: #023d69;
  --mel-primary-2: #0c79ba;
  --mel-dark: #101828;
  --mel-muted: #667085;
  --mel-border: #e4e7ec;
  --mel-success: #12a150;
  --mel-warning: #d98200;
  --mel-danger: #d92d20;
  --mel-radius: 18px;
  --mel-shadow: 0 10px 30px rgba(16, 24, 40, .06);
}

.mel-app, .mel-app * { box-sizing: border-box; }
.mel-app { color: var(--mel-dark); font-family: inherit; width: 100%; }
.mel-app-shell { min-height: 100vh; background: var(--mel-bg); display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.mel-app-content-only { min-height: 0; background: transparent; display: block; }
.mel-app-content-only > .mel-main { padding: 0; }
.mel-app a { text-decoration: none; }
.mel-sidebar { min-height: 100vh; position: sticky; top: 0; align-self: start; padding: 24px 18px; background: var(--mel-surface); border-right: 1px solid rgba(2,61,105,.08); display: flex; flex-direction: column; gap: 24px; }
.mel-brand { color: var(--mel-primary); font-size: 22px; font-weight: 900; letter-spacing: .08em; padding: 4px 10px 18px; border-bottom: 1px solid var(--mel-border); }
.mel-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mel-nav-item { color: #344054; font-size: 14px; font-weight: 700; padding: 11px 13px; border-radius: 11px; transition: .15s ease; }
.mel-nav-item:hover { background: #f2f7fb; color: var(--mel-primary); }
.mel-nav-item.is-active { background: var(--mel-primary); color: #fff; }
.mel-user-block { border-top: 1px solid var(--mel-border); padding: 16px 10px 0; display: flex; flex-direction: column; gap: 3px; }
.mel-user-block strong { font-size: 13px; overflow-wrap: anywhere; }
.mel-user-block span { font-size: 12px; color: var(--mel-muted); }
.mel-user-block a { color: var(--mel-primary-2); font-size: 12px; font-weight: 700; margin-top: 6px; }
.mel-main { min-width: 0; padding: 34px; }
.mel-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.mel-page-header h1 { margin: 4px 0 6px; font-size: clamp(28px, 3vw, 42px); line-height: 1.05; color: var(--mel-dark); }
.mel-page-header p { margin: 0; color: var(--mel-muted); max-width: 760px; line-height: 1.55; }
.mel-eyebrow { color: var(--mel-primary-2); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.mel-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mel-card { background: var(--mel-surface); border: 1px solid rgba(16,24,40,.05); border-radius: var(--mel-radius); padding: 20px; box-shadow: var(--mel-shadow); }
.mel-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.mel-card-head h2 { margin: 0; font-size: 18px; }
.mel-card-head a { color: var(--mel-primary-2); font-size: 13px; font-weight: 700; }
.mel-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.mel-kpi { min-height: 140px; display: flex; flex-direction: column; justify-content: center; }
.mel-kpi > span { color: var(--mel-muted); font-size: 12px; font-weight: 700; }
.mel-kpi > strong { font-size: 29px; line-height: 1.1; margin: 9px 0; overflow-wrap: anywhere; }
.mel-kpi > small { color: var(--mel-muted); font-size: 11px; line-height: 1.35; }
.mel-section-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.75fr); gap: 18px; }
.mel-workflow-list { display: flex; flex-direction: column; gap: 14px; }
.mel-workflow-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.mel-workflow-item > span { width: 34px; height: 34px; display: grid; place-items: center; background: #e7f2fa; color: var(--mel-primary); font-weight: 800; border-radius: 50%; }
.mel-workflow-item strong, .mel-workflow-item small { display: block; }
.mel-workflow-item strong { font-size: 13px; margin-bottom: 3px; }
.mel-workflow-item small { color: var(--mel-muted); line-height: 1.4; }
.mel-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mel-filter { border: 1px solid var(--mel-border); background: rgba(255,255,255,.65); color: #344054; border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.mel-filter.is-active { background: var(--mel-primary); border-color: var(--mel-primary); color: #fff; }
.mel-search { min-width: 260px; margin-left: auto; border: 1px solid var(--mel-border) !important; background: #fff !important; border-radius: 999px !important; padding: 9px 14px !important; font: inherit; font-size: 13px; color: var(--mel-dark); outline: none; }
.mel-search:focus, .mel-status-select:focus { border-color: var(--mel-primary-2) !important; box-shadow: 0 0 0 3px rgba(12,121,186,.1) !important; }
.mel-table-card { padding: 0; overflow: hidden; }
.mel-table-wrap { overflow-x: auto; }
.mel-table { width: 100%; border-collapse: collapse; min-width: 900px; font-size: 13px; }
.mel-table th, .mel-table td { padding: 14px 15px; border-bottom: 1px solid var(--mel-border); text-align: left; vertical-align: middle; }
.mel-table th { color: var(--mel-muted); background: #fafbfc; text-transform: uppercase; letter-spacing: .045em; font-size: 10px; font-weight: 800; }
.mel-table tbody tr:hover { background: #fbfdff; }
.mel-table td strong, .mel-table td small { display: block; }
.mel-table td small { color: var(--mel-muted); font-size: 10px; margin-top: 3px; }
.mel-empty { padding: 30px; text-align: center; color: var(--mel-muted); }
.mel-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 9px 15px; border: 1px solid var(--mel-primary); border-radius: 999px; background: var(--mel-primary); color: #fff !important; font-size: 12px; font-weight: 800; cursor: pointer; }
.mel-btn:hover { background: #022f52; color: #fff !important; }
.mel-btn-secondary { background: #fff; color: var(--mel-primary) !important; }
.mel-btn-secondary:hover { background: #eef6fb; color: var(--mel-primary) !important; }
.mel-btn-small { min-height: 31px; padding: 6px 11px; font-size: 11px; }
.mel-pill { display: inline-flex; align-items: center; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1; background: #f2f4f7; color: #475467; }
.mel-pill-success { background: #eaf8ef; color: #067647; }
.mel-pill-warning { background: #fff3d6; color: #a15c00; }
.mel-pill-danger { background: #feeceb; color: #b42318; }
.mel-status-select { min-width: 145px; border: 1px solid var(--mel-border); border-radius: 9px; background: #fff; padding: 7px 30px 7px 9px; font: inherit; font-size: 11px; color: var(--mel-dark); }
.mel-save-state { display: block; min-height: 14px; margin-top: 3px; color: var(--mel-muted); font-size: 9px; }
.mel-save-state.is-error { color: var(--mel-danger); }
.mel-profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; padding: 0; overflow: hidden; }
.mel-profile-field { padding: 20px; border-right: 1px solid var(--mel-border); border-bottom: 1px solid var(--mel-border); }
.mel-profile-field span, .mel-profile-field strong { display: block; }
.mel-profile-field span { color: var(--mel-muted); font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.mel-profile-field strong { font-size: 15px; }
.mel-login-state { min-height: 75vh; display: grid; place-items: center; padding: 30px; background: var(--mel-bg); }
.mel-login-card { width: min(480px,100%); background: #fff; border-radius: 22px; padding: 34px; box-shadow: var(--mel-shadow); }
.mel-login-card h2 { font-size: 34px; margin: 5px 0; }
.mel-login-card > p { color: var(--mel-muted); }
.mel-notice { padding: 16px; border-radius: 12px; background: #fff; }
.mel-notice-error { border-left: 4px solid var(--mel-danger); }

/* Central Formidable treatment.
 * Automatically applies on known Melatec portal pages via .melatec-portal-ui,
 * and can still be opted into manually with .melatec-form-skin.
 */
.mel-app .frm_forms,
.melatec-form-skin .frm_forms,
.melatec-portal-ui .frm_forms {
  --mel-form-border: #d0d5dd;
  --mel-form-border-hover: #98a2b3;
  --mel-form-focus: rgba(12, 121, 186, .14);
  --mel-form-placeholder: #98a2b3;
  font-family: inherit;
  color: var(--mel-dark);
}

.mel-app .frm_forms .frm_form_fields > fieldset,
.melatec-form-skin .frm_forms .frm_form_fields > fieldset,
.melatec-portal-ui .frm_forms .frm_form_fields > fieldset {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

.mel-app .frm_fields_container,
.melatec-form-skin .frm_fields_container,
.melatec-portal-ui .frm_fields_container {
  row-gap: 4px;
}

.mel-app .frm_form_field,
.melatec-form-skin .frm_form_field,
.melatec-portal-ui .frm_form_field {
  margin-bottom: 18px;
}

.mel-app .frm_primary_label,
.melatec-form-skin .frm_primary_label,
.melatec-portal-ui .frm_primary_label {
  display: block;
  color: #344054 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.35;
  margin: 0 0 7px !important;
  letter-spacing: 0;
}

.mel-app .frm_required,
.melatec-form-skin .frm_required,
.melatec-portal-ui .frm_required {
  color: #d92d20 !important;
}

.mel-app input[type=text], .mel-app input[type=email], .mel-app input[type=tel], .mel-app input[type=number], .mel-app input[type=date], .mel-app input[type=password], .mel-app input[type=url], .mel-app input[type=search], .mel-app select, .mel-app textarea,
.melatec-form-skin input[type=text], .melatec-form-skin input[type=email], .melatec-form-skin input[type=tel], .melatec-form-skin input[type=number], .melatec-form-skin input[type=date], .melatec-form-skin input[type=password], .melatec-form-skin input[type=url], .melatec-form-skin input[type=search], .melatec-form-skin select, .melatec-form-skin textarea,
.melatec-portal-ui .frm_forms input[type=text], .melatec-portal-ui .frm_forms input[type=email], .melatec-portal-ui .frm_forms input[type=tel], .melatec-portal-ui .frm_forms input[type=number], .melatec-portal-ui .frm_forms input[type=date], .melatec-portal-ui .frm_forms input[type=password], .melatec-portal-ui .frm_forms input[type=url], .melatec-portal-ui .frm_forms input[type=search], .melatec-portal-ui .frm_forms select, .melatec-portal-ui .frm_forms textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--mel-form-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #101828 !important;
  padding: 11px 14px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03) !important;
  outline: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.mel-app textarea,
.melatec-form-skin textarea,
.melatec-portal-ui .frm_forms textarea {
  min-height: 118px;
  resize: vertical;
}

.mel-app input::placeholder, .mel-app textarea::placeholder,
.melatec-form-skin input::placeholder, .melatec-form-skin textarea::placeholder,
.melatec-portal-ui .frm_forms input::placeholder, .melatec-portal-ui .frm_forms textarea::placeholder {
  color: var(--mel-form-placeholder) !important;
  opacity: 1;
}

.mel-app input:hover, .mel-app select:hover, .mel-app textarea:hover,
.melatec-form-skin input:hover, .melatec-form-skin select:hover, .melatec-form-skin textarea:hover,
.melatec-portal-ui .frm_forms input:hover, .melatec-portal-ui .frm_forms select:hover, .melatec-portal-ui .frm_forms textarea:hover {
  border-color: var(--mel-form-border-hover) !important;
}

.mel-app input:focus, .mel-app select:focus, .mel-app textarea:focus,
.melatec-form-skin input:focus, .melatec-form-skin select:focus, .melatec-form-skin textarea:focus,
.melatec-portal-ui .frm_forms input:focus, .melatec-portal-ui .frm_forms select:focus, .melatec-portal-ui .frm_forms textarea:focus {
  border-color: var(--mel-primary-2) !important;
  box-shadow: 0 0 0 4px var(--mel-form-focus) !important;
}

.mel-app input[readonly], .mel-app input:disabled, .mel-app select:disabled, .mel-app textarea:disabled,
.melatec-form-skin input[readonly], .melatec-form-skin input:disabled, .melatec-form-skin select:disabled, .melatec-form-skin textarea:disabled,
.melatec-portal-ui .frm_forms input[readonly], .melatec-portal-ui .frm_forms input:disabled, .melatec-portal-ui .frm_forms select:disabled, .melatec-portal-ui .frm_forms textarea:disabled {
  background: #f8fafc !important;
  color: #667085 !important;
  cursor: not-allowed;
}

.mel-app .frm_description,
.melatec-form-skin .frm_description,
.melatec-portal-ui .frm_description {
  color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.45;
  margin-top: 6px !important;
}

.mel-app input[type=checkbox], .mel-app input[type=radio],
.melatec-form-skin input[type=checkbox], .melatec-form-skin input[type=radio],
.melatec-portal-ui .frm_forms input[type=checkbox], .melatec-portal-ui .frm_forms input[type=radio] {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  padding: 0 !important;
  accent-color: var(--mel-primary-2);
}

.mel-app .frm_checkbox label, .mel-app .frm_radio label,
.melatec-form-skin .frm_checkbox label, .melatec-form-skin .frm_radio label,
.melatec-portal-ui .frm_checkbox label, .melatec-portal-ui .frm_radio label {
  color: #344054 !important;
  font-size: 13px !important;
  line-height: 1.45;
}

.mel-app .frm_section_heading,
.melatec-form-skin .frm_section_heading,
.melatec-portal-ui .frm_section_heading {
  margin: 12px 0 22px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #eaecf0 !important;
}

.mel-app .frm_section_heading h3,
.melatec-form-skin .frm_section_heading h3,
.melatec-portal-ui .frm_section_heading h3 {
  margin: 0 0 4px !important;
  color: #101828 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.3;
}

.mel-app .frm_button_submit, .mel-app .frm_submit button,
.melatec-form-skin .frm_button_submit, .melatec-form-skin .frm_submit button,
.melatec-portal-ui .frm_button_submit, .melatec-portal-ui .frm_submit button {
  min-height: 46px !important;
  border: 1px solid var(--mel-primary) !important;
  border-radius: 12px !important;
  background: var(--mel-primary) !important;
  color: #fff !important;
  padding: 11px 20px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 4px 10px rgba(2, 61, 105, .12) !important;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.mel-app .frm_button_submit:hover, .mel-app .frm_submit button:hover,
.melatec-form-skin .frm_button_submit:hover, .melatec-form-skin .frm_submit button:hover,
.melatec-portal-ui .frm_button_submit:hover, .melatec-portal-ui .frm_submit button:hover {
  background: #022f52 !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(2, 61, 105, .16) !important;
}

.mel-app .frm_error,
.melatec-form-skin .frm_error,
.melatec-portal-ui .frm_error {
  color: var(--mel-danger) !important;
  font-size: 11px !important;
  font-weight: 600;
  margin-top: 5px !important;
}

.mel-app .frm_error_style,
.melatec-form-skin .frm_error_style,
.melatec-portal-ui .frm_error_style {
  border: 1px solid #fecdca !important;
  border-radius: 12px !important;
  background: #fef3f2 !important;
  color: #b42318 !important;
  padding: 13px 15px !important;
}

.mel-app .frm_message,
.melatec-form-skin .frm_message,
.melatec-portal-ui .frm_message {
  border: 1px solid #abefc6 !important;
  border-radius: 12px !important;
  background: #ecfdf3 !important;
  color: #067647 !important;
  padding: 13px 15px !important;
}

/* Keep portal forms visually consistent inside existing white cards. */
.melatec-portal-ui .frm_forms .frm_submit {
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .mel-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mel-section-grid { grid-template-columns: 1fr; }
}
@media (max-width: 850px) {
  .mel-app-shell { display: block; }
  .mel-sidebar { min-height: 0; position: static; border-right: 0; border-bottom: 1px solid var(--mel-border); padding: 14px; gap: 10px; }
  .mel-brand { padding: 0 4px 10px; font-size: 18px; }
  .mel-nav { flex-direction: row; overflow-x: auto; padding-bottom: 3px; }
  .mel-nav-item { white-space: nowrap; padding: 8px 11px; font-size: 11px; }
  .mel-user-block { display: none; }
  .mel-main { padding: 22px; }
}
@media (max-width: 620px) {
  .mel-main { padding: 18px 14px; }
  .mel-page-header { align-items: flex-start; flex-direction: column; }
  .mel-page-header h1 { font-size: 30px; }
  .mel-kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .mel-kpi { min-height: 115px; padding: 14px; }
  .mel-kpi > strong { font-size: 22px; }
  .mel-search { min-width: 100%; width: 100%; margin-left: 0; order: -1; }
  .mel-profile-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
 * Melatec Dashboard v0.3
 * Sleeker portal treatment designed to sit inside the existing Elementor shell.
 * -------------------------------------------------------------------------- */
.mel-page-header h1 {
  font-family: "Specter Bold", Sans-serif !important;
  font-size: 40px !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
}

.mel-dashboard-home {
  --mel-teal: #1aa48f;
  --mel-teal-dark: #087d70;
  --mel-sky: #0c79ba;
  --mel-sky-dark: #075887;
  --mel-amber: #e6a323;
  --mel-green: #139b67;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mel-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.mel-stat-card {
  position: relative;
  min-height: 154px;
  overflow: hidden;
  border: 1px solid rgba(2, 61, 105, .07);
  border-radius: 20px;
  padding: 18px 18px 17px;
  background: linear-gradient(145deg, #ffffff 28%, #f6fbfe 100%);
  box-shadow: 0 12px 30px rgba(10, 56, 88, .07);
  isolation: isolate;
}

.mel-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--mel-stat-accent, var(--mel-primary-2));
}

.mel-stat-card::after {
  content: "";
  position: absolute;
  width: 118px;
  height: 118px;
  right: -46px;
  top: -48px;
  border-radius: 50%;
  background: var(--mel-stat-wash, rgba(12, 121, 186, .08));
  z-index: -1;
}

.mel-stat-card.is-blue { --mel-stat-accent: #0c79ba; --mel-stat-wash: rgba(12,121,186,.11); }
.mel-stat-card.is-teal { --mel-stat-accent: #1aa48f; --mel-stat-wash: rgba(26,164,143,.12); }
.mel-stat-card.is-amber { --mel-stat-accent: #e6a323; --mel-stat-wash: rgba(230,163,35,.14); }
.mel-stat-card.is-green { --mel-stat-accent: #139b67; --mel-stat-wash: rgba(19,155,103,.12); }

.mel-stat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.mel-stat-icon,
.mel-value-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.mel-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--mel-stat-wash, rgba(12,121,186,.1));
  color: var(--mel-stat-accent, var(--mel-primary-2));
}

.mel-stat-icon svg,
.mel-value-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mel-stat-label {
  color: #53657a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}

.mel-stat-value {
  display: block;
  margin: 0 0 6px;
  color: #092842;
  font-size: clamp(30px, 2.2vw, 38px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}

.mel-stat-note {
  display: block;
  color: #7a8999;
  font-size: 11px;
  line-height: 1.4;
}

.mel-value-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(2,61,105,.06);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(2,61,105,.035), rgba(26,164,143,.055));
}

.mel-value-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 14px 15px;
  border-radius: 15px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 5px 16px rgba(12,53,79,.045);
}

.mel-value-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: var(--mel-primary);
  background: #e9f4fa;
}

.mel-value-copy {
  min-width: 0;
}

.mel-value-copy > span,
.mel-value-copy > strong,
.mel-value-copy > small {
  display: block;
}

.mel-value-copy > span {
  margin-bottom: 3px;
  color: #65768a;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.mel-value-copy > strong {
  margin-bottom: 3px;
  color: #092842;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.mel-value-copy > small {
  color: #8a97a6;
  font-size: 9.5px;
  line-height: 1.3;
}

.mel-dashboard-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(285px, .7fr);
  gap: 14px;
}

.mel-dashboard-panel {
  padding: 18px;
  border: 1px solid rgba(2,61,105,.06);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(11,52,79,.06);
}

.mel-dashboard-panel .mel-card-head {
  margin-bottom: 12px;
}

.mel-dashboard-panel .mel-card-head h2 {
  margin: 2px 0 0;
  color: #092842;
  font-size: 18px;
  font-weight: 800;
}

.mel-panel-kicker {
  display: block;
  color: var(--mel-teal);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.mel-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #edf7f4;
  color: #0d8c77 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.mel-panel-link:hover {
  background: #dff2ed;
}

.mel-dashboard-recent .mel-table-wrap {
  margin: 0 -4px -3px;
  padding: 0 4px 3px;
}

.mel-dashboard-recent .mel-table {
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0 7px;
}

.mel-dashboard-recent .mel-table th,
.mel-dashboard-recent .mel-table td {
  border: 0;
}

.mel-dashboard-recent .mel-table th {
  padding: 0 11px 5px;
  background: transparent;
  color: #8090a1;
  font-size: 9px;
}

.mel-dashboard-recent .mel-table td {
  padding: 11px;
  background: #f7fafc;
}

.mel-dashboard-recent .mel-table tbody tr td:first-child {
  border-radius: 12px 0 0 12px;
}

.mel-dashboard-recent .mel-table tbody tr td:last-child {
  border-radius: 0 12px 12px 0;
}

.mel-dashboard-recent .mel-table tbody tr:hover td {
  background: #f0f7fb;
}

.mel-dashboard-recent .mel-pill {
  padding: 6px 9px;
  border-radius: 999px;
}

.mel-dashboard-recent .mel-btn-small {
  min-height: 30px;
  background: #fff;
  color: var(--mel-primary) !important;
  border-color: #b9d5e5;
  box-shadow: none;
}

.mel-dashboard-workflow {
  background: linear-gradient(165deg, #ffffff 0%, #f5fbfa 100%);
}

.mel-dashboard-workflow .mel-workflow-list {
  position: relative;
  gap: 4px;
}

.mel-dashboard-workflow .mel-workflow-item {
  position: relative;
  grid-template-columns: 38px 1fr;
  gap: 11px;
  padding: 8px 0 11px;
}

.mel-dashboard-workflow .mel-workflow-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 40px;
  bottom: -4px;
  width: 1px;
  background: linear-gradient(#b9ddd5, rgba(185,221,213,.15));
}

.mel-dashboard-workflow .mel-workflow-item > span {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: 1px solid #cbe7e0;
  background: #eff9f6;
  color: #0d8c77;
  box-shadow: 0 0 0 5px #fff;
}

.mel-dashboard-workflow .mel-workflow-item strong {
  color: #18384f;
  font-size: 12px;
}

.mel-dashboard-workflow .mel-workflow-item small {
  color: #7d8d9c;
  font-size: 10px;
}

@media (max-width: 1100px) {
  .mel-stat-grid,
  .mel-value-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mel-dashboard-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .mel-page-header h1 {
    font-size: 32px !important;
  }

  .mel-stat-grid,
  .mel-value-strip {
    grid-template-columns: 1fr;
  }

  .mel-stat-card {
    min-height: 140px;
  }
}

/* --------------------------------------------------------------------------
 * Melatec Portal v0.4
 * Align generated screens with the existing Melatec Elementor UI.
 * Existing page headings/sidebar remain the visual source of truth.
 * -------------------------------------------------------------------------- */

:root {
  --mel-bg: #dbe8f5;
  --mel-surface: #ffffff;
  --mel-surface-soft: #f7f9fb;
  --mel-primary: #023d69;
  --mel-primary-2: #129b82;
  --mel-dark: #023d69;
  --mel-muted: #66778b;
  --mel-border: #ccd6df;
  --mel-success: #129b82;
  --mel-warning: #f0bd2d;
  --mel-danger: #ff6464;
  --mel-radius: 20px;
  --mel-shadow: 0 7px 20px rgba(2, 61, 105, .045);
}

/* Elementor already supplies the page title in content-only mode. */
.mel-app-content-only .mel-page-header {
  margin: 0 0 10px;
  min-height: 0;
  justify-content: flex-end;
}

.mel-app-content-only .mel-page-header > div:first-child {
  display: none;
}

.mel-app-content-only .mel-page-actions {
  margin-left: auto;
}

.mel-page-header h1 {
  font-family: "Specter Bold", Sans-serif !important;
  font-size: 40px !important;
  font-weight: 600 !important;
}

/* Buttons mirror the compact existing portal buttons. */
.mel-btn {
  min-height: 30px;
  padding: 6px 13px;
  border-radius: 22px;
  border-color: var(--mel-primary);
  background: var(--mel-primary);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: none;
}

.mel-btn-secondary {
  background: #fff;
  color: var(--mel-primary) !important;
}

.mel-btn-small {
  min-height: 26px;
  padding: 4px 10px;
  font-size: 9px;
}

/* Application filters become compact text tabs on the Melatec light-blue panel. */
.mel-app-content-only .mel-filterbar {
  margin: 0;
  padding: 18px 22px 12px;
  gap: 20px;
  border-radius: 20px 20px 0 0;
  background: var(--mel-bg);
  align-items: center;
}

.mel-app-content-only .mel-filter {
  position: relative;
  padding: 0 0 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mel-primary);
  font-size: 11px;
  font-weight: 800;
}

.mel-app-content-only .mel-filter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 3px;
  background: var(--mel-primary-2);
  transition: right .15s ease;
}

.mel-app-content-only .mel-filter:hover,
.mel-app-content-only .mel-filter.is-active {
  color: var(--mel-primary-2);
  background: transparent;
}

.mel-app-content-only .mel-filter.is-active::after {
  right: 0;
}

.mel-app-content-only .mel-search {
  width: min(260px, 100%);
  min-width: 220px;
  height: 31px;
  margin-left: auto;
  padding: 5px 11px !important;
  border: 1px solid #c6d1dc !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--mel-primary);
  font-size: 10px;
}

/* The list itself sits inside the same blue panel as the tabs. */
.mel-app-content-only .mel-filterbar + .mel-table-card {
  padding: 0 22px 22px;
  border: 0;
  border-radius: 0 0 20px 20px;
  background: var(--mel-bg);
  box-shadow: none;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table-wrap {
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(2,61,105,.045);
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table {
  min-width: 850px;
  border-collapse: collapse;
  color: var(--mel-primary);
  font-size: 10px;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table th {
  padding: 8px 10px;
  border: 0;
  background: var(--mel-primary);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #d3d9df;
  color: #2f4f68;
  font-size: 9px;
  line-height: 1.25;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table tbody tr:last-child td {
  border-bottom: 0;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table tbody tr:hover {
  background: #f8fbfd;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table td strong {
  color: var(--mel-primary-2);
  font-size: 9px;
  font-weight: 800;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table td small {
  margin-top: 2px;
  color: #54748d;
  font-size: 8px;
}

/* Risk treatment follows the existing screen: label plus compact score block. */
.mel-risk-label {
  display: block !important;
  margin: 0 0 3px !important;
  color: var(--mel-primary) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.mel-score-badge {
  display: inline-flex;
  min-width: 28px;
  min-height: 17px;
  padding: 2px 6px;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: #f7c948;
  color: var(--mel-primary);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.mel-score-badge.mel-risk-medium-risk,
.mel-score-badge.mel-risk-low-risk {
  background: #8fcb52;
}

.mel-score-badge.mel-risk-high-risk,
.mel-score-badge.mel-risk-very-high-risk {
  background: #f7c948;
}

.mel-status-select {
  width: 100%;
  min-width: 145px;
  height: 27px;
  padding: 3px 27px 3px 8px;
  border: 1px solid #c8d0d8;
  border-radius: 5px;
  color: #48677e;
  background-color: #fff;
  font-size: 9px;
}

.mel-save-state {
  min-height: 0;
  margin: 0;
  font-size: 8px;
}

/* Keep dashboard cards sleek, but remove the decorative corner circles. */
.mel-stat-card::after {
  display: none !important;
  content: none !important;
}

/* Reduce the v0.3 dashboard scale so it matches the established UI proportions. */
.mel-stat-card {
  min-height: 118px;
  border-radius: 15px;
  padding: 14px;
}

.mel-stat-top {
  margin-bottom: 12px;
}

.mel-stat-icon {
  width: 31px;
  height: 31px;
  border-radius: 9px;
}

.mel-stat-icon svg,
.mel-value-icon svg {
  width: 16px;
  height: 16px;
}

.mel-stat-label {
  font-size: 9px;
}

.mel-stat-value {
  margin-bottom: 4px;
  font-size: 25px;
}

.mel-stat-note {
  font-size: 8px;
}

.mel-value-strip {
  border-radius: 15px;
  padding: 7px;
}

.mel-value-card {
  gap: 9px;
  padding: 10px 11px;
  border-radius: 10px;
}

.mel-value-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.mel-value-copy > span { font-size: 8px; }
.mel-value-copy > strong { font-size: 15px; }
.mel-value-copy > small { font-size: 8px; }

.mel-dashboard-panel {
  border-radius: 15px;
  padding: 14px;
}

.mel-dashboard-panel .mel-card-head h2 {
  font-size: 15px;
}

.mel-panel-kicker,
.mel-panel-link {
  font-size: 8px !important;
}

@media (max-width: 760px) {
  .mel-app-content-only .mel-filterbar {
    gap: 12px;
    padding: 15px;
  }

  .mel-app-content-only .mel-search {
    order: 2;
    width: 100%;
    min-width: 100%;
    margin-left: 0;
  }

  .mel-app-content-only .mel-filterbar + .mel-table-card {
    padding: 0 15px 15px;
  }
}

/* ========================================================================
 * Melatec Platform v0.5 visual alignment
 * Uses the existing Melatec portal screens as the design reference.
 * ======================================================================== */

/* --- Dashboard: stronger branded contrast -------------------------------- */
.mel-dashboard-home {
  gap: 16px;
}

.mel-stat-card {
  min-height: 132px;
  border: 0;
  border-radius: 16px;
  padding: 17px 18px;
  box-shadow: 0 8px 20px rgba(2,61,105,.08);
}

.mel-stat-card::before,
.mel-stat-card::after {
  display: none !important;
  content: none !important;
}

.mel-stat-card.is-blue {
  background: linear-gradient(135deg, #023D69 0%, #0C79BA 100%);
}
.mel-stat-card.is-teal {
  background: linear-gradient(135deg, #128F82 0%, #20A58F 100%);
}
.mel-stat-card.is-amber {
  background: linear-gradient(135deg, #F7C948 0%, #F2B93B 100%);
}
.mel-stat-card.is-green {
  background: linear-gradient(135deg, #0D8C77 0%, #20A58F 100%);
}

.mel-stat-card.is-blue .mel-stat-label,
.mel-stat-card.is-blue .mel-stat-value,
.mel-stat-card.is-blue .mel-stat-note,
.mel-stat-card.is-teal .mel-stat-label,
.mel-stat-card.is-teal .mel-stat-value,
.mel-stat-card.is-teal .mel-stat-note,
.mel-stat-card.is-green .mel-stat-label,
.mel-stat-card.is-green .mel-stat-value,
.mel-stat-card.is-green .mel-stat-note {
  color: #fff;
}

.mel-stat-card.is-blue .mel-stat-note,
.mel-stat-card.is-teal .mel-stat-note,
.mel-stat-card.is-green .mel-stat-note {
  color: rgba(255,255,255,.76);
}

.mel-stat-card.is-amber .mel-stat-label,
.mel-stat-card.is-amber .mel-stat-value {
  color: #023D69;
}
.mel-stat-card.is-amber .mel-stat-note {
  color: rgba(2,61,105,.72);
}

.mel-stat-top {
  margin-bottom: 13px;
}

.mel-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255,255,255,.17) !important;
  color: #fff !important;
}
.mel-stat-card.is-amber .mel-stat-icon {
  background: rgba(2,61,105,.09) !important;
  color: #023D69 !important;
}

.mel-stat-label {
  font-size: 10px;
  font-weight: 800;
}

.mel-stat-value {
  margin-bottom: 4px;
  font-size: 29px;
  font-weight: 800;
}

.mel-stat-note {
  font-size: 9px;
}

/* Secondary financial strip follows the pale-blue portal panel language. */
.mel-value-strip {
  gap: 0;
  padding: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #DBE8F5;
}

.mel-value-card {
  min-height: 72px;
  padding: 11px 13px;
  border-radius: 0;
  border-right: 1px solid rgba(2,61,105,.12);
  background: #fff;
  box-shadow: none;
}
.mel-value-card:first-child { border-radius: 9px 0 0 9px; }
.mel-value-card:last-child {
  border-right: 0;
  border-radius: 0 9px 9px 0;
}

.mel-value-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #E7F1F8;
}
.mel-value-copy > span { color: #456A85; font-size: 8px; }
.mel-value-copy > strong { color: #023D69; font-size: 17px; }
.mel-value-copy > small { color: #7990A2; font-size: 8px; }

/* Dashboard lower section. */
.mel-dashboard-content-grid {
  grid-template-columns: minmax(0, 1.9fr) minmax(260px, .65fr);
  gap: 14px;
}

.mel-dashboard-panel {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(2,61,105,.06);
}

.mel-dashboard-recent {
  padding: 16px;
  background: #DBE8F5;
}

.mel-dashboard-panel .mel-card-head h2 {
  color: #023D69;
  font-size: 15px;
  font-weight: 800;
}

.mel-panel-kicker {
  color: #20A58F;
  font-size: 8px;
}

.mel-panel-link {
  padding: 5px 8px;
  border-radius: 20px;
  background: #fff;
  color: #023D69 !important;
  border: 1px solid rgba(2,61,105,.16);
  font-size: 8px !important;
}

/* Dashboard recent table should look like the existing Applications table. */
.mel-dashboard-recent .mel-table-wrap {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(2,61,105,.05);
}

.mel-dashboard-recent .mel-table {
  min-width: 760px;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 9px;
}

.mel-dashboard-recent .mel-table th {
  padding: 8px 9px;
  background: #023D69;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.mel-dashboard-recent .mel-table td {
  padding: 8px 9px;
  border-bottom: 1px solid #D6DEE5;
  background: #fff;
  color: #2F536C;
  font-size: 9px;
}

.mel-dashboard-recent .mel-table tbody tr:last-child td { border-bottom: 0; }
.mel-dashboard-recent .mel-table tbody tr td:first-child,
.mel-dashboard-recent .mel-table tbody tr td:last-child { border-radius: 0; }
.mel-dashboard-recent .mel-table tbody tr:hover td { background: #F7FBFD; }
.mel-dashboard-recent .mel-table td strong { color: #20A58F; font-size: 9px; }
.mel-dashboard-recent .mel-table td small { color: #53778F; font-size: 8px; }

.mel-dashboard-recent .mel-pill {
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 8px;
}

.mel-dashboard-recent .mel-btn-small {
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 14px;
  font-size: 8px;
}

/* Workflow receives a strong brand block instead of another white card. */
.mel-dashboard-workflow {
  padding: 16px;
  background: linear-gradient(160deg, #023D69 0%, #075A86 100%);
}

.mel-dashboard-workflow .mel-panel-kicker { color: #64D5C2; }
.mel-dashboard-workflow .mel-card-head h2 { color: #fff; }

.mel-dashboard-workflow .mel-workflow-item:not(:last-child)::after {
  background: rgba(255,255,255,.18);
}

.mel-dashboard-workflow .mel-workflow-item > span {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.34);
  background: #20A58F;
  color: #fff;
  box-shadow: 0 0 0 4px #074F78;
  font-size: 10px;
}

.mel-dashboard-workflow .mel-workflow-item {
  grid-template-columns: 34px 1fr;
  gap: 9px;
  padding: 7px 0 10px;
}
.mel-dashboard-workflow .mel-workflow-item:not(:last-child)::after {
  left: 15px;
  top: 35px;
}
.mel-dashboard-workflow .mel-workflow-item strong { color: #fff; font-size: 10px; }
.mel-dashboard-workflow .mel-workflow-item small { color: rgba(255,255,255,.67); font-size: 8px; }

/* --- Application list: mirror user's existing table treatment -------------- */
.mel-app-content-only .mel-filterbar {
  padding: 16px 16px 10px;
  gap: 18px;
  border-radius: 16px 16px 0 0;
  background: #DBE8F5;
}

.mel-app-content-only .mel-filter {
  padding-bottom: 6px;
  color: #023D69;
  font-size: 9px;
  font-weight: 700;
}
.mel-app-content-only .mel-filter:hover,
.mel-app-content-only .mel-filter.is-active { color: #20A58F; }
.mel-app-content-only .mel-filter.is-active::after { background: #20A58F; }

.mel-app-content-only .mel-search {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  min-width: 230px;
  padding: 4px 9px !important;
  border: 1px solid rgba(2,61,105,.16) !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  box-shadow: none !important;
}

.mel-app-content-only .mel-filterbar + .mel-table-card {
  padding: 0 16px 16px;
  border-radius: 0 0 16px 16px;
  background: #DBE8F5;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table-wrap {
  border-radius: 7px;
  box-shadow: 0 4px 12px rgba(2,61,105,.045);
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table {
  font-size: 9px;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table th {
  padding: 7px 9px;
  background: #023D69;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table td {
  padding: 7px 9px;
  background: #fff;
  border-bottom: 1px solid #D6DEE5;
  color: #31546D;
  font-size: 9px;
  line-height: 1.25;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table tbody tr:hover td {
  background: #F8FBFD;
}

.mel-app-content-only .mel-filterbar + .mel-table-card .mel-table td strong {
  color: #20A58F;
  font-size: 9px;
}

/* Compact status field to match the original Formidable View. */
.mel-app-content-only .mel-status-select,
.mel-app-content-only .mel-table select,
.mel-app-content-only .mel-table .mel-select {
  width: 100% !important;
  max-width: 230px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  padding: 2px 24px 2px 8px !important;
  border: 1px solid #C5D0D8 !important;
  border-radius: 5px !important;
  background-color: #fff !important;
  color: #41627A !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.mel-app-content-only .mel-table .mel-btn-small,
.mel-app-content-only .mel-table .mel-btn {
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid #023D69;
  border-radius: 14px;
  background: #fff;
  color: #023D69 !important;
  font-size: 8px;
  font-weight: 700;
  box-shadow: none;
}

/* Risk / score labels follow the existing yellow + green score blocks. */
.mel-risk-score,
.mel-score-badge {
  display: inline-block;
  min-width: 24px;
  margin-top: 2px;
  padding: 2px 4px;
  border-radius: 3px;
  background: #F7C948;
  color: #023D69;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

@media (max-width: 1100px) {
  .mel-dashboard-content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .mel-stat-grid,
  .mel-value-strip { grid-template-columns: 1fr 1fr; }
  .mel-value-card,
  .mel-value-card:first-child,
  .mel-value-card:last-child { border-radius: 8px; border-right: 0; }
}

/* ========================================================================
 * Melatec Platform v0.6
 * Xero-inspired financial operations layout using Melatec branding.
 * ======================================================================== */

/* Dashboard canvas */
.mel-fin-dashboard {
  background: #e7eef4;
  border: 1px solid #dbe3ea;
  border-radius: 12px;
  padding: 14px;
  color: #183247;
}

.mel-dashboard-overview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 12px;
}

.mel-dashboard-overview-head h2 {
  margin: 0 0 2px;
  color: #0b2f4c;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.mel-dashboard-overview-head p {
  margin: 0;
  color: #6f8292;
  font-size: 9px;
}

.mel-dashboard-snapshot {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mel-dashboard-snapshot span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid #cad6df;
  border-radius: 13px;
  background: #fff;
  color: #456579;
  font-size: 8px;
  font-weight: 700;
}

.mel-fin-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.mel-fin-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #d9e0e6;
  border-radius: 10px;
  padding: 14px 15px;
  box-shadow: none;
}

.mel-fin-loanbook { grid-column: span 3; }
.mel-fin-pipeline { grid-column: span 6; }
.mel-fin-attention { grid-column: span 3; }
.mel-fin-activity { grid-column: span 4; min-height: 300px; }
.mel-fin-recent { grid-column: span 5; min-height: 300px; }
.mel-fin-risk { grid-column: span 3; min-height: 300px; }

.mel-fin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  margin-bottom: 12px;
}

.mel-fin-card-head h3 {
  margin: 0;
  color: #092f4d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.mel-fin-card-head h3 span,
.mel-fin-card-meta {
  color: #748694;
  font-size: 9px;
  font-weight: 500;
}

.mel-fin-card-head > a {
  color: #0c79ba;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.mel-card-menu {
  color: #607989;
  font-size: 12px;
  letter-spacing: 1px;
}

.mel-amount-pair,
.mel-activity-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0;
  margin: 4px 0 11px;
}

.mel-amount-pair > div,
.mel-activity-summary > div {
  min-width: 0;
  padding-right: 10px;
}

.mel-amount-pair > div + div,
.mel-activity-summary > div + div {
  padding-left: 12px;
  border-left: 1px solid #e2e7eb;
}

.mel-amount-pair strong,
.mel-activity-summary strong {
  display: block;
  overflow: hidden;
  color: #173d58;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mel-amount-pair span,
.mel-activity-summary span {
  display: block;
  margin-top: 2px;
  color: #607b8d;
  font-size: 8px;
}

.mel-balance-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e3e8ec;
  color: #425f74;
  font-size: 9px;
}

.mel-balance-line strong {
  color: #173d58;
  font-weight: 800;
}

.mel-fin-card-actions {
  margin-top: 18px;
}

.mel-xero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid #c9d4dc;
  border-radius: 15px;
  background: #fff;
  color: #0874b9 !important;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none;
}

.mel-xero-btn:hover {
  border-color: #0c79ba;
  background: #f4faff;
}

.mel-xero-btn-primary {
  border-color: #075f98;
  background: #087dc2;
  color: #fff !important;
}

.mel-xero-btn-primary:hover {
  background: #066ca8;
}

/* Pipeline watchlist */
.mel-watchlist {
  border-top: 1px solid #d7dfe5;
}

.mel-watchlist-head,
.mel-watchlist-row {
  display: grid;
  grid-template-columns: minmax(130px,1.5fr) 55px minmax(90px,1fr) minmax(90px,1fr);
  gap: 8px;
  align-items: center;
}

.mel-watchlist-head {
  min-height: 27px;
  color: #758895;
  font-size: 8px;
}

.mel-watchlist-head span:not(:first-child),
.mel-watchlist-row > *:not(:first-child) {
  text-align: right;
}

.mel-watchlist-row {
  min-height: 35px;
  border-top: 1px solid #e1e6ea;
  color: #25475f;
  font-size: 9px;
}

.mel-watchlist-row:first-of-type { border-top: 0; }
.mel-watchlist-row strong { font-size: 9px; }
.mel-watchlist-row a { color: #0879bd; text-decoration: none; }

.mel-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #8296a5;
}
.mel-status-in-review { background: #f0b62b; }
.mel-status-awaiting-approval { background: #d58d19; }
.mel-status-approved { background: #1ba087; }
.mel-status-declined { background: #e15454; }
.mel-status-settled { background: #4b84b5; }

/* Attention widget */
.mel-attention-total {
  margin: 8px 0 16px;
}

.mel-attention-total strong {
  display: block;
  color: #173d58;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
}

.mel-attention-total span {
  display: block;
  margin-top: 4px;
  color: #e24c54;
  font-size: 8px;
}

.mel-attention-list {
  border-top: 1px solid #e0e6ea;
}

.mel-attention-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  border-bottom: 1px solid #e6eaed;
  color: #405f74;
  font-size: 9px;
}

.mel-attention-list strong { color: #173d58; }

/* Six-month chart */
.mel-bar-chart {
  position: relative;
  height: 165px;
  margin-top: 12px;
  border-bottom: 1px solid #bcc9d1;
}

.mel-chart-grid {
  position: absolute;
  inset: 0 0 19px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.mel-chart-grid span {
  display: block;
  border-top: 1px solid #e2e7eb;
}

.mel-chart-bars {
  position: absolute;
  inset: 3px 0 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 7px;
  align-items: end;
}

.mel-chart-month {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 18px;
  gap: 2px;
}

.mel-chart-columns {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 100%;
}

.mel-chart-bar {
  width: min(17px, 38%);
  min-height: 2px;
  border-radius: 3px 3px 0 0;
}

.mel-chart-bar.is-requested { background: #087dc2; }
.mel-chart-bar.is-approved { background: #9fd4f2; border: 1px solid #087dc2; border-bottom: 0; }

.mel-chart-month small {
  align-self: end;
  color: #617989;
  font-size: 8px;
  text-align: center;
}

.mel-chart-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 9px;
  color: #61798a;
  font-size: 8px;
}

.mel-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mel-chart-legend i { width: 7px; height: 7px; border-radius: 50%; }
.mel-chart-legend i.is-requested { background: #087dc2; }
.mel-chart-legend i.is-approved { background: #9fd4f2; border: 1px solid #087dc2; }

/* Compact recent applications table */
.mel-compact-table-wrap {
  overflow: auto;
  max-height: 230px;
  border-top: 1px solid #d6dfe5;
}

.mel-compact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}

.mel-compact-table th {
  padding: 7px 5px;
  border-bottom: 1px solid #d9e0e5;
  color: #718492;
  font-size: 7.5px;
  font-weight: 700;
  text-align: left;
}

.mel-compact-table td {
  padding: 8px 5px;
  border-bottom: 1px solid #e0e5e9;
  color: #2b4d64;
  vertical-align: middle;
}

.mel-compact-table td:first-child a {
  display: block;
  color: #0879bd;
  font-weight: 700;
  text-decoration: none;
}

.mel-compact-table td small {
  display: block;
  margin-top: 2px;
  color: #8796a1;
  font-size: 7px;
}

.mel-row-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #b7c8d4;
  border-radius: 50%;
  color: #0879bd !important;
  font-size: 16px;
  line-height: 1;
  text-decoration: none !important;
}

/* Risk widget */
.mel-risk-score-summary {
  margin: 5px 0 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e6ea;
}

.mel-risk-score-summary strong {
  display: block;
  color: #173d58;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
}

.mel-risk-score-summary span {
  display: block;
  margin-top: 4px;
  color: #607b8d;
  font-size: 8px;
}

.mel-risk-meter { margin: 10px 0; }
.mel-risk-meter > div:first-child { display: flex; justify-content: space-between; color: #48677b; font-size: 8px; }
.mel-risk-track { height: 5px; margin-top: 5px; overflow: hidden; border-radius: 4px; background: #edf1f4; }
.mel-risk-fill { display: block; height: 100%; border-radius: 4px; background: #7894a7; }
.mel-risk-fill-high-risk { background: #e4ab2f; }
.mel-risk-fill-medium-risk { background: #80b83e; }
.mel-risk-fill-low-risk { background: #1ca087; }

.mel-mandate-mini {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid #e0e6ea;
}
.mel-mandate-mini span,
.mel-mandate-mini small { display: block; color: #627c8d; font-size: 8px; }
.mel-mandate-mini strong { display: block; margin: 3px 0; color: #173d58; font-size: 17px; }

/* ------------------------------------------------------------------------
 * Applications index: Xero-inspired action bar, tabs and data list.
 * ------------------------------------------------------------------------ */
.mel-applications-index {
  color: #18394f;
}

.mel-index-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

.mel-index-actions-left {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mel-index-summary {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #687f8f;
  font-size: 8px;
}

.mel-index-summary strong {
  color: #173d58;
  font-size: 13px;
}

.mel-index-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding-left: 0;
  border-bottom: 1px solid #cfd8df;
}

.mel-app-content-only .mel-index-tabs .mel-filter,
.mel-index-tabs .mel-filter {
  min-height: 34px;
  margin: 0 -1px -1px 0;
  padding: 8px 14px 7px;
  border: 1px solid #d3dbe1;
  border-bottom-color: #cfd8df;
  border-radius: 0;
  background: #f8fafb;
  color: #0a78ba;
  font-size: 9px;
  font-weight: 500;
}

.mel-app-content-only .mel-index-tabs .mel-filter::after,
.mel-index-tabs .mel-filter::after { display: none !important; content: none !important; }

.mel-app-content-only .mel-index-tabs .mel-filter.is-active,
.mel-index-tabs .mel-filter.is-active {
  position: relative;
  z-index: 1;
  border-bottom-color: #fff;
  background: #fff;
  color: #173d58;
  font-weight: 700;
}

.mel-index-tabs .mel-filter span {
  color: #6d8493;
  font-size: 8px;
}

.mel-list-shell {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #d3dee6;
  border-radius: 9px;
  background: #e3edf5;
}

.mel-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 38px;
  padding: 5px 7px 8px;
  color: #607a8b;
  font-size: 8px;
}

.mel-list-toolbar > span strong { color: #173d58; }

.mel-search-wrap {
  display: flex;
  align-items: stretch;
}

.mel-app-content-only .mel-search-wrap .mel-search,
.mel-search-wrap .mel-search {
  width: 220px;
  min-width: 0;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0;
  padding: 4px 8px !important;
  border: 1px solid #bac8d2 !important;
  border-right: 0 !important;
  border-radius: 4px 0 0 4px !important;
  background: #fff !important;
  color: #26485f;
  font-size: 8px !important;
}

.mel-search-wrap button {
  min-width: 48px;
  height: 28px;
  border: 1px solid #bac8d2;
  border-radius: 0 4px 4px 0;
  background: #f7f9fa;
  color: #0879bd;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}

.mel-list-shell .mel-table-card,
.mel-app-content-only .mel-list-shell .mel-table-card {
  padding: 0 !important;
  border: 1px solid #d0dae1 !important;
  border-radius: 5px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.mel-list-shell .mel-table-wrap {
  overflow-x: auto;
  border-radius: 4px;
}

.mel-list-shell .mel-table {
  min-width: 1040px;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 8.5px;
}

.mel-list-shell .mel-table th {
  height: 29px;
  padding: 6px 7px !important;
  border: 0 !important;
  background: #023d69 !important;
  color: #fff !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}

.mel-list-shell .mel-table td {
  height: 43px;
  padding: 6px 7px !important;
  border: 0 !important;
  border-bottom: 1px solid #d9e0e5 !important;
  background: #fff !important;
  color: #31546b !important;
  font-size: 8.5px !important;
  line-height: 1.22;
}

.mel-list-shell .mel-table tbody tr:last-child td { border-bottom: 0 !important; }
.mel-list-shell .mel-table tbody tr:hover td { background: #f7fafc !important; }

.mel-list-shell .mel-table td strong {
  color: #244860;
  font-size: 8.5px;
  font-weight: 700;
}

.mel-list-shell .mel-table td small {
  display: block;
  margin-top: 2px;
  color: #7490a2;
  font-size: 7px;
}

.mel-table-primary-link {
  display: block;
  color: #169f89 !important;
  font-weight: 800;
  text-decoration: none !important;
}

.mel-list-shell .mel-money {
  text-align: right !important;
  white-space: nowrap;
}

.mel-list-shell .mel-status-select {
  width: 100% !important;
  min-width: 125px !important;
  max-width: 175px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 2px 22px 2px 6px !important;
  border: 1px solid #c2cdd5 !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  color: #41657c !important;
  font-size: 8px !important;
  box-shadow: none !important;
}

.mel-list-shell .mel-table-action {
  width: 36px;
  text-align: center;
}

.mel-list-shell .mel-row-arrow {
  width: 21px;
  height: 21px;
  border-color: #9fb5c4;
  font-size: 14px;
}

@media (max-width: 1180px) {
  .mel-fin-loanbook,
  .mel-fin-attention,
  .mel-fin-risk { grid-column: span 4; }
  .mel-fin-pipeline { grid-column: span 8; }
  .mel-fin-activity { grid-column: span 5; }
  .mel-fin-recent { grid-column: span 7; }
}

@media (max-width: 900px) {
  .mel-fin-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mel-fin-loanbook,
  .mel-fin-pipeline,
  .mel-fin-attention,
  .mel-fin-activity,
  .mel-fin-recent,
  .mel-fin-risk { grid-column: span 1; }
  .mel-fin-pipeline,
  .mel-fin-recent { grid-column: span 2; }
}

@media (max-width: 620px) {
  .mel-fin-dashboard { padding: 10px; }
  .mel-fin-grid { grid-template-columns: 1fr; }
  .mel-fin-loanbook,
  .mel-fin-pipeline,
  .mel-fin-attention,
  .mel-fin-activity,
  .mel-fin-recent,
  .mel-fin-risk { grid-column: span 1; }
  .mel-dashboard-overview-head,
  .mel-index-actions,
  .mel-list-toolbar { align-items: flex-start; flex-direction: column; }
  .mel-index-tabs { overflow-x: auto; }
  .mel-index-tabs .mel-filter { white-space: nowrap; }
  .mel-search-wrap { width: 100%; }
  .mel-app-content-only .mel-search-wrap .mel-search,
  .mel-search-wrap .mel-search { width: 100%; }
}

/* ========================================================================
 * Melatec Platform v0.7
 * Cleaner operational layout based on the established Melatec UI.
 * Page headings remain controlled by Elementor. Internal widget headings are
 * intentionally compact and are protected from global Elementor typography.
 * ======================================================================== */

/* Dashboard */
.mel-ops-dashboard {
  width: 100%;
  color: #023d69;
}

.mel-ops-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid #cbdce8;
  border-radius: 18px;
  background: #dbe8f5;
}

.mel-ops-metric {
  position: relative;
  min-width: 0;
  padding: 18px 20px 17px;
  border-right: 1px solid rgba(2,61,105,.12);
  background: rgba(255,255,255,.58);
}

.mel-ops-metric:last-child { border-right: 0; }
.mel-ops-metric::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #0c79ba;
}
.mel-ops-metric-approved::before { background: #1fa381; }
.mel-ops-metric-mandates::before { background: #023d69; }
.mel-ops-metric-requested::before { background: #e6b124; }

.mel-ops-metric > span,
.mel-ops-metric > strong,
.mel-ops-metric > small { display: block; }

.mel-ops-metric > span {
  margin-bottom: 7px;
  color: #527188;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.mel-ops-metric > strong {
  margin-bottom: 4px;
  color: #023d69;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap;
}

.mel-ops-metric > small {
  color: #6a8295;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.mel-ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, .8fr);
  gap: 18px;
  align-items: start;
}

.mel-ops-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d4e0e8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(2,61,105,.045);
}

.mel-ops-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid #e2e8ed;
}

.mel-ops-panel-head .mel-ops-kicker {
  display: block;
  margin-bottom: 2px;
  color: #169d83;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.mel-ops-panel-head h3,
.mel-app .mel-ops-panel-head h3 {
  margin: 0 !important;
  color: #023d69 !important;
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.mel-ops-panel-head > a {
  color: #139d83 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.mel-ops-pipeline-table { padding: 0 18px 10px; }
.mel-ops-pipeline-head,
.mel-ops-pipeline-row {
  display: grid;
  grid-template-columns: minmax(155px, 1.4fr) 78px minmax(105px, 1fr) minmax(105px, 1fr);
  gap: 12px;
  align-items: center;
}

.mel-ops-pipeline-head {
  min-height: 34px;
  color: #74899a;
  font-size: 9px;
  font-weight: 700;
}

.mel-ops-pipeline-head > span:not(:first-child),
.mel-ops-pipeline-row > *:not(:first-child) { text-align: right; }

.mel-ops-pipeline-row {
  min-height: 43px;
  border-top: 1px solid #e6ebef;
  color: #31546b;
  font-size: 11px;
}

.mel-ops-pipeline-row > strong { color: #023d69; font-size: 11px; }
.mel-ops-pipeline-row .mel-status-dot { margin-right: 8px; }

.mel-ops-attention-total {
  padding: 20px 18px 15px;
  background: #f8fbfd;
}
.mel-ops-attention-total strong {
  display: block;
  color: #023d69;
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.mel-ops-attention-total span {
  display: block;
  margin-top: 5px;
  color: #d34343;
  font-size: 10px;
}
.mel-ops-attention-list { padding: 0 18px 10px; }
.mel-ops-attention-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  border-top: 1px solid #e7ecef;
  color: #345b72 !important;
  font-size: 11px;
  text-decoration: none !important;
}
.mel-ops-attention-list a:hover span { color: #139d83; }
.mel-ops-attention-list strong { color: #023d69; }

.mel-ops-recent { grid-column: 1; }
.mel-ops-risk { grid-column: 2; }

.mel-ops-score {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 18px 14px;
  border-bottom: 1px solid #e3e9ed;
}
.mel-ops-score > div {
  padding: 17px 0 14px;
}
.mel-ops-score > div + div {
  padding-left: 18px;
  border-left: 1px solid #e3e9ed;
}
.mel-ops-score strong,
.mel-ops-score span { display: block; }
.mel-ops-score strong {
  color: #023d69;
  font-size: 25px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
}
.mel-ops-score span {
  margin-top: 4px;
  color: #708697;
  font-size: 9px;
}
.mel-ops-risk-row { padding: 0 18px 12px; }
.mel-ops-risk-row > div:first-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #536f81;
  font-size: 10px;
}
.mel-ops-risk-row strong { color: #023d69; }
.mel-ops-risk-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f5;
}
.mel-ops-risk-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.mel-ops-mandate-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 4px;
  border-top: 1px solid #e2e8ec;
  background: #f8fbfd;
}
.mel-ops-mandate-row > div { padding: 13px 18px; }
.mel-ops-mandate-row > div + div { border-left: 1px solid #e2e8ec; }
.mel-ops-mandate-row span,
.mel-ops-mandate-row strong { display: block; }
.mel-ops-mandate-row span { color: #708697; font-size: 9px; }
.mel-ops-mandate-row strong { margin-top: 3px; color: #023d69; font-size: 17px; }

/* Compact dashboard application table */
.mel-ops-recent .mel-compact-table-wrap { padding: 14px 18px 18px; }
.mel-ops-recent .mel-compact-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #d9e2e8;
  border-radius: 10px;
  font-size: 10px;
}
.mel-ops-recent .mel-compact-table th {
  padding: 8px 10px !important;
  border: 0 !important;
  background: #023d69 !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  text-align: left;
  text-transform: none !important;
}
.mel-ops-recent .mel-compact-table td {
  padding: 9px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #e4e9ed !important;
  background: #fff !important;
  color: #254b63 !important;
  font-size: 10px !important;
  vertical-align: middle;
}
.mel-ops-recent .mel-compact-table tr:last-child td { border-bottom: 0 !important; }
.mel-ops-recent .mel-compact-table td strong { color: #023d69; font-size: 10px; }
.mel-ops-recent .mel-compact-table td small { color: #718696; font-size: 8px; }

/* Applications index */
.mel-applications-screen {
  width: 100%;
}
.mel-applications-panel {
  padding: 22px;
  border: 1px solid #cbdde9;
  border-radius: 20px;
  background: #dbe8f5;
}
.mel-applications-topbar,
.mel-applications-filterrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.mel-applications-topbar { margin-bottom: 16px; }
.mel-applications-sections,
.mel-app-status-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.mel-applications-sections span,
.mel-applications-sections a {
  position: relative;
  padding: 4px 0 8px;
  color: #023d69 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.mel-applications-sections .is-active { color: #169d83 !important; }
.mel-applications-sections .is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #169d83;
}
.mel-applications-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mel-app-text-action {
  border: 0;
  background: transparent;
  color: #0c79ba;
  padding: 5px 0;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.mel-app-new {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 6px 13px;
  border: 1px solid #023d69;
  border-radius: 18px;
  background: #023d69;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.mel-applications-filterrow {
  padding: 12px 0;
  border-top: 1px solid rgba(2,61,105,.10);
}
.mel-app-status-tabs { gap: 3px; }
.mel-app-status-tabs .mel-filter {
  min-height: 29px;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #315871;
  font-size: 9px;
  font-weight: 700;
}
.mel-app-status-tabs .mel-filter:hover { background: rgba(255,255,255,.55); }
.mel-app-status-tabs .mel-filter.is-active {
  background: #fff;
  color: #169d83;
  box-shadow: inset 0 -2px 0 #169d83;
}
.mel-app-status-tabs .mel-filter span {
  display: inline-flex;
  min-width: 15px;
  justify-content: center;
  margin-left: 2px;
  color: #728a9a;
  font-size: 8px;
}
.mel-app-search { margin-left: auto; }
.mel-app-search input {
  width: 245px !important;
  min-height: 34px !important;
  padding: 7px 11px !important;
  border: 1px solid #cad8e2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #173f59 !important;
  font-size: 10px !important;
  box-shadow: none !important;
}
.mel-app-table-meta {
  display: flex;
  justify-content: flex-end;
  padding: 0 2px 6px;
  color: #657f91;
  font-size: 9px;
}
.mel-app-table-wrap {
  overflow-x: auto;
  border-radius: 11px;
  background: #fff;
}
.mel-app-table {
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
}
.mel-app-table thead th {
  padding: 9px 10px !important;
  border: 0 !important;
  background: #023d69 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.mel-app-table thead th:first-child { border-radius: 9px 0 0 0; }
.mel-app-table thead th:last-child { border-radius: 0 9px 0 0; }
.mel-app-table tbody td {
  height: 49px;
  padding: 8px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #dde4e9 !important;
  background: #fff !important;
  color: #204a63 !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  vertical-align: middle !important;
}
.mel-app-table tbody tr:last-child td { border-bottom: 0 !important; }
.mel-app-table tbody tr:hover td { background: #f9fcfe !important; }
.mel-app-table td strong,
.mel-app-table td small { display: block; }
.mel-app-table td strong { color: #023d69; font-size: 10.5px; font-weight: 700; }
.mel-app-table td small { margin-top: 2px; color: #5f7d91; font-size: 8.5px; }
.mel-app-reference {
  display: block;
  color: #169d83 !important;
  font-size: 10.5px;
  font-weight: 800;
  text-decoration: none !important;
}
.mel-app-table .mel-risk-label { font-size: 10px !important; }
.mel-app-table .mel-score-badge {
  display: inline-flex;
  margin-top: 3px;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 9px !important;
  font-weight: 800 !important;
}
.mel-app-table .mel-status-select {
  width: 100%;
  max-width: 220px;
  min-width: 160px;
  min-height: 29px !important;
  padding: 4px 26px 4px 9px !important;
  border: 1px solid #c9d5de !important;
  border-radius: 6px !important;
  background-color: #fff !important;
  color: #315a72 !important;
  font-size: 9.5px !important;
  box-shadow: none !important;
}
.mel-app-table .mel-save-state { min-height: 0; margin: 1px 0 0; font-size: 7px; }
.mel-income-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 5px;
  background: #f3f5f6;
  color: #023d69;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.mel-app-action { width: 74px; text-align: right; }
.mel-app-action a {
  color: #0c79ba !important;
  font-size: 9.5px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}
.mel-app-action a span { font-size: 14px; vertical-align: -1px; }

@media (max-width: 1100px) {
  .mel-ops-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mel-ops-metric:nth-child(2) { border-right: 0; }
  .mel-ops-metric:nth-child(-n+2) { border-bottom: 1px solid rgba(2,61,105,.12); }
  .mel-ops-grid { grid-template-columns: 1fr; }
  .mel-ops-recent,
  .mel-ops-risk { grid-column: auto; }
}

@media (max-width: 650px) {
  .mel-ops-summary { grid-template-columns: 1fr; }
  .mel-ops-metric { border-right: 0; border-bottom: 1px solid rgba(2,61,105,.12); }
  .mel-ops-metric:last-child { border-bottom: 0; }
  .mel-ops-pipeline-head,
  .mel-ops-pipeline-row { grid-template-columns: minmax(120px,1.4fr) 60px 90px 90px; }
  .mel-applications-panel { padding: 15px; border-radius: 14px; }
  .mel-applications-topbar,
  .mel-applications-filterrow { align-items: flex-start; flex-direction: column; }
  .mel-app-search,
  .mel-app-search input { width: 100% !important; }
}

/* ========================================================================
 * Melatec Platform v0.8
 * Tailmater / Material 3 inspired component layer, adapted to Melatec.
 * No Tailwind dependency is bundled. These are native, scoped CSS primitives.
 * ======================================================================== */

.mel-app {
  --mel-m3-primary: #023d69;
  --mel-m3-on-primary: #ffffff;
  --mel-m3-primary-container: #dbe8f5;
  --mel-m3-on-primary-container: #073b5d;
  --mel-m3-secondary: #169d83;
  --mel-m3-on-secondary: #ffffff;
  --mel-m3-secondary-container: #ddf3ec;
  --mel-m3-on-secondary-container: #075d4f;
  --mel-m3-tertiary-container: #fff3d4;
  --mel-m3-on-tertiary-container: #6c5200;
  --mel-m3-surface: #ffffff;
  --mel-m3-surface-container-lowest: #ffffff;
  --mel-m3-surface-container-low: #f6f9fb;
  --mel-m3-surface-container: #eef4f8;
  --mel-m3-surface-container-high: #e7f0f6;
  --mel-m3-on-surface: #15384f;
  --mel-m3-on-surface-variant: #5e7586;
  --mel-m3-outline: #91a8b8;
  --mel-m3-outline-variant: #cbd8e1;
  --mel-m3-error: #d95050;
  --mel-m3-radius-sm: 8px;
  --mel-m3-radius-md: 12px;
  --mel-m3-radius-lg: 16px;
  --mel-m3-radius-xl: 22px;
  --mel-m3-elev-1: 0 1px 2px rgba(2,61,105,.08), 0 2px 8px rgba(2,61,105,.05);
  --mel-m3-elev-2: 0 4px 14px rgba(2,61,105,.09);
}

/* Material-style actions */
.mel-app .mel-btn,
.mel-app .mel-app-new,
.mel-app .mel-panel-link,
.mel-app .mel-btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 17px;
  border: 0;
  border-radius: 999px;
  background: var(--mel-m3-primary);
  color: var(--mel-m3-on-primary) !important;
  box-shadow: none;
  font-family: inherit;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .01em;
  text-decoration: none !important;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.mel-app .mel-btn:hover,
.mel-app .mel-app-new:hover,
.mel-app .mel-panel-link:hover {
  background: #07527f;
  box-shadow: var(--mel-m3-elev-1);
}
.mel-app .mel-btn:active,
.mel-app .mel-app-new:active { transform: translateY(1px); }

/* Tonal action, based on Tailmater's tonal button. */
.mel-app .mel-btn-tonal,
.mel-app .mel-app-text-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--mel-m3-secondary-container);
  color: var(--mel-m3-on-secondary-container) !important;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.mel-app .mel-app-text-action:hover { background: #ccebe2; }

/* Outlined action. */
.mel-app .mel-btn-secondary,
.mel-app .mel-btn-outline,
.mel-app .mel-row-arrow,
.mel-app .mel-app-action a {
  border: 1px solid var(--mel-m3-outline);
  background: var(--mel-m3-surface);
  color: var(--mel-m3-primary) !important;
  box-shadow: none;
}

/* ----------------------------------------------------------------------
 * Dashboard: use Tailmater's outlined / elevated / filled card language.
 * ---------------------------------------------------------------------- */
.mel-ops-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mel-ops-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 12px;
  overflow: visible;
  border: 0;
  border-radius: var(--mel-m3-radius-xl);
  background: var(--mel-m3-surface-container);
}

.mel-ops-metric {
  min-height: 112px;
  padding: 17px 18px;
  overflow: hidden;
  border: 0;
  border-radius: var(--mel-m3-radius-lg);
  background: var(--mel-m3-surface);
  box-shadow: none;
}
.mel-ops-metric::before { display: none !important; content: none !important; }
.mel-ops-metric-applications {
  background: var(--mel-m3-primary-container);
  color: var(--mel-m3-on-primary-container);
}
.mel-ops-metric-requested {
  border: 1px solid var(--mel-m3-outline-variant);
  background: var(--mel-m3-surface);
}
.mel-ops-metric-approved {
  background: var(--mel-m3-secondary-container);
  color: var(--mel-m3-on-secondary-container);
}
.mel-ops-metric-mandates {
  background: var(--mel-m3-primary);
  color: #fff;
  box-shadow: var(--mel-m3-elev-1);
}

.mel-ops-metric > span {
  margin: 0 0 11px;
  color: inherit;
  opacity: .75;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .025em;
  text-transform: none;
}
.mel-ops-metric > strong {
  margin: 0 0 7px;
  color: inherit;
  font-size: 25px !important;
  font-weight: 650 !important;
  letter-spacing: -.02em;
  line-height: 1 !important;
}
.mel-ops-metric > small {
  color: inherit;
  opacity: .68;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

.mel-ops-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(270px, .72fr);
  gap: 16px;
}

.mel-ops-panel {
  border: 1px solid var(--mel-m3-outline-variant);
  border-radius: var(--mel-m3-radius-lg);
  background: var(--mel-m3-surface);
  box-shadow: none;
}
.mel-ops-panel.mel-ops-recent { box-shadow: var(--mel-m3-elev-1); }
.mel-ops-panel.mel-ops-attention {
  border-color: #ead9a9;
  background: var(--mel-m3-tertiary-container);
}
.mel-ops-panel.mel-ops-risk {
  border-color: #c5e4db;
  background: #f4fbf8;
}

.mel-ops-panel-head {
  padding: 15px 17px 13px;
  border-bottom: 1px solid var(--mel-m3-outline-variant);
}
.mel-ops-panel-head .mel-ops-kicker {
  color: var(--mel-m3-secondary);
  font-size: 8.5px !important;
  letter-spacing: .085em;
}
.mel-ops-panel-head h3,
.mel-app .mel-ops-panel-head h3 {
  color: var(--mel-m3-on-surface) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.mel-ops-panel-head > a {
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--mel-m3-secondary-container);
  color: var(--mel-m3-on-secondary-container) !important;
  font-size: 9.5px !important;
  text-decoration: none !important;
}

/* Pipeline as clean list rows in an outlined card. */
.mel-ops-pipeline-table { padding: 6px 16px 12px; }
.mel-ops-pipeline-head {
  min-height: 30px;
  color: var(--mel-m3-on-surface-variant);
  font-size: 8.5px;
}
.mel-ops-pipeline-row {
  min-height: 44px;
  border-top: 1px solid var(--mel-m3-outline-variant);
  color: var(--mel-m3-on-surface);
}
.mel-ops-pipeline-row:hover { background: var(--mel-m3-surface-container-low); }
.mel-ops-pipeline-row > span:first-child { font-weight: 600; }

/* Attention uses Tailmater-style lists. */
.mel-ops-attention-total {
  padding: 18px 17px 13px;
  background: transparent;
}
.mel-ops-attention-total strong {
  color: var(--mel-m3-on-tertiary-container);
  font-size: 30px !important;
}
.mel-ops-attention-total span { color: #846a20; }
.mel-ops-attention-list { padding: 0 9px 9px; }
.mel-ops-attention-list a {
  min-height: 44px;
  padding: 0 10px;
  border-top: 0;
  border-radius: var(--mel-m3-radius-md);
  color: #554a2b !important;
}
.mel-ops-attention-list a:hover { background: rgba(255,255,255,.58); }

/* Risk uses Material linear progress indicator proportions. */
.mel-ops-risk-track {
  height: 4px;
  border-radius: 999px;
  background: #dce8e4;
}
.mel-ops-risk-track > span { border-radius: 999px; }
.mel-ops-mandate-row { background: rgba(255,255,255,.58); }

/* Compact dashboard table becomes an elevated list/table hybrid. */
.mel-ops-recent .mel-compact-table-wrap { padding: 12px 16px 16px; }
.mel-ops-recent .mel-compact-table {
  border: 1px solid var(--mel-m3-outline-variant);
  border-radius: var(--mel-m3-radius-md);
  background: var(--mel-m3-surface);
}
.mel-ops-recent .mel-compact-table th {
  padding: 9px 11px !important;
  background: var(--mel-m3-surface-container) !important;
  color: var(--mel-m3-on-surface-variant) !important;
  font-size: 8.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}
.mel-ops-recent .mel-compact-table td {
  padding: 10px 11px !important;
  border-bottom: 1px solid var(--mel-m3-outline-variant) !important;
  color: var(--mel-m3-on-surface) !important;
}
.mel-ops-recent .mel-compact-table tr:hover td { background: var(--mel-m3-surface-container-low) !important; }

/* ----------------------------------------------------------------------
 * Applications: Tailmater tab, segmented button, card and input patterns.
 * ---------------------------------------------------------------------- */
.mel-applications-panel {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--mel-m3-outline-variant);
  border-radius: var(--mel-m3-radius-xl);
  background: var(--mel-m3-surface-container);
  box-shadow: none;
}

.mel-applications-topbar {
  min-height: 60px;
  margin: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--mel-m3-outline-variant);
  background: var(--mel-m3-surface);
}

/* Material tabs: no pill, just active indicator. */
.mel-applications-sections {
  align-self: stretch;
  gap: 4px;
}
.mel-applications-sections span,
.mel-applications-sections a {
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  padding: 0 14px;
  color: var(--mel-m3-on-surface-variant) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.mel-applications-sections .is-active { color: var(--mel-m3-primary) !important; }
.mel-applications-sections .is-active::after {
  left: 12px;
  right: 12px;
  bottom: 0;
  width: auto;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--mel-m3-secondary);
}

.mel-applications-actions { gap: 8px; }

.mel-applications-filterrow {
  margin: 0;
  padding: 14px 16px;
  border-top: 0;
  border-bottom: 1px solid var(--mel-m3-outline-variant);
  background: var(--mel-m3-surface-container);
}

/* Segmented buttons, adapted from Tailmater. */
.mel-app-status-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--mel-m3-outline);
  border-radius: 999px;
  background: var(--mel-m3-surface);
}
.mel-app-status-tabs .mel-filter {
  min-height: 36px;
  padding: 7px 13px;
  border: 0;
  border-right: 1px solid var(--mel-m3-outline);
  border-radius: 0;
  background: transparent;
  color: var(--mel-m3-on-surface-variant);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
}
.mel-app-status-tabs .mel-filter:last-child { border-right: 0; }
.mel-app-status-tabs .mel-filter:hover { background: var(--mel-m3-surface-container-low); }
.mel-app-status-tabs .mel-filter.is-active {
  background: var(--mel-m3-secondary-container);
  color: var(--mel-m3-on-secondary-container);
  box-shadow: none;
}
.mel-app-status-tabs .mel-filter.is-active::before {
  content: "✓";
  margin-right: 5px;
  font-size: 9px;
}
.mel-app-status-tabs .mel-filter span {
  margin-left: 4px;
  color: inherit;
  opacity: .7;
}

/* Outlined search field. */
.mel-app-search { position: relative; margin-left: auto; }
.mel-app-search input {
  width: 260px !important;
  min-height: 40px !important;
  padding: 8px 13px !important;
  border: 1px solid var(--mel-m3-outline) !important;
  border-radius: var(--mel-m3-radius-sm) !important;
  background: var(--mel-m3-surface) !important;
  color: var(--mel-m3-on-surface) !important;
  font-size: 10px !important;
  box-shadow: none !important;
  outline: none !important;
}
.mel-app-search input:focus {
  border: 2px solid var(--mel-m3-primary) !important;
  padding: 7px 12px !important;
}
.mel-app-search input::placeholder { color: #718697; opacity: 1; }

.mel-app-table-meta {
  padding: 9px 17px 7px;
  color: var(--mel-m3-on-surface-variant);
  background: var(--mel-m3-surface-container);
}

.mel-app-table-wrap {
  margin: 0 14px 14px;
  overflow: hidden;
  border: 1px solid var(--mel-m3-outline-variant);
  border-radius: var(--mel-m3-radius-md);
  background: var(--mel-m3-surface);
}
.mel-app-table {
  min-width: 900px;
  background: var(--mel-m3-surface);
}
.mel-app-table thead th {
  min-height: 38px;
  padding: 10px 12px !important;
  background: var(--mel-m3-primary) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}
.mel-app-table thead th:first-child,
.mel-app-table thead th:last-child { border-radius: 0; }
.mel-app-table tbody td {
  height: 54px;
  padding: 9px 12px !important;
  border-bottom: 1px solid var(--mel-m3-outline-variant) !important;
  background: var(--mel-m3-surface) !important;
  color: var(--mel-m3-on-surface) !important;
}
.mel-app-table tbody tr:hover td { background: var(--mel-m3-surface-container-low) !important; }
.mel-app-reference { color: var(--mel-m3-secondary) !important; }

.mel-app-table .mel-status-select {
  min-height: 36px !important;
  padding: 7px 30px 7px 11px !important;
  border: 1px solid var(--mel-m3-outline) !important;
  border-radius: var(--mel-m3-radius-sm) !important;
  background-color: var(--mel-m3-surface) !important;
  color: var(--mel-m3-on-surface) !important;
  font-size: 9.5px !important;
}
.mel-app-table .mel-status-select:focus {
  border: 2px solid var(--mel-m3-primary) !important;
  outline: none !important;
}
.mel-income-badge {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--mel-m3-primary-container);
  color: var(--mel-m3-primary);
}
.mel-app-action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
}

/* ----------------------------------------------------------------------
 * Formidable: Material-style outlined fields while preserving Formidable DOM.
 * ---------------------------------------------------------------------- */
.melatec-portal-ui .frm_forms .frm_form_field > label,
.melatec-form-skin .frm_forms .frm_form_field > label {
  margin-bottom: 6px !important;
  color: var(--mel-m3-on-surface, #15384f) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}
.melatec-portal-ui .frm_forms input[type="text"],
.melatec-portal-ui .frm_forms input[type="email"],
.melatec-portal-ui .frm_forms input[type="tel"],
.melatec-portal-ui .frm_forms input[type="number"],
.melatec-portal-ui .frm_forms input[type="date"],
.melatec-portal-ui .frm_forms input[type="password"],
.melatec-portal-ui .frm_forms select,
.melatec-portal-ui .frm_forms textarea,
.melatec-form-skin .frm_forms input[type="text"],
.melatec-form-skin .frm_forms input[type="email"],
.melatec-form-skin .frm_forms input[type="tel"],
.melatec-form-skin .frm_forms input[type="number"],
.melatec-form-skin .frm_forms input[type="date"],
.melatec-form-skin .frm_forms input[type="password"],
.melatec-form-skin .frm_forms select,
.melatec-form-skin .frm_forms textarea {
  min-height: 46px !important;
  padding: 10px 13px !important;
  border: 1px solid #91a8b8 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #15384f !important;
  box-shadow: none !important;
  font-size: 12px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.melatec-portal-ui .frm_forms textarea,
.melatec-form-skin .frm_forms textarea { min-height: 110px !important; }
.melatec-portal-ui .frm_forms input:focus,
.melatec-portal-ui .frm_forms select:focus,
.melatec-portal-ui .frm_forms textarea:focus,
.melatec-form-skin .frm_forms input:focus,
.melatec-form-skin .frm_forms select:focus,
.melatec-form-skin .frm_forms textarea:focus {
  border: 2px solid #023d69 !important;
  outline: none !important;
  box-shadow: none !important;
}
.melatec-portal-ui .frm_forms .frm_submit button,
.melatec-portal-ui .frm_forms .frm_button_submit,
.melatec-form-skin .frm_forms .frm_submit button,
.melatec-form-skin .frm_forms .frm_button_submit {
  min-height: 40px !important;
  padding: 9px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #023d69 !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.melatec-portal-ui .frm_forms .frm_submit button:hover,
.melatec-portal-ui .frm_forms .frm_button_submit:hover,
.melatec-form-skin .frm_forms .frm_submit button:hover,
.melatec-form-skin .frm_forms .frm_button_submit:hover {
  background: #07527f !important;
  box-shadow: var(--mel-m3-elev-1) !important;
}

@media (max-width: 1100px) {
  .mel-ops-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mel-applications-filterrow { align-items: flex-start; }
  .mel-app-status-tabs { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 650px) {
  .mel-ops-summary { grid-template-columns: 1fr; }
  .mel-applications-topbar,
  .mel-applications-filterrow { padding-left: 12px; padding-right: 12px; }
  .mel-applications-sections { width: 100%; overflow-x: auto; }
  .mel-applications-actions { width: 100%; justify-content: flex-end; padding-bottom: 10px; }
  .mel-app-status-tabs { width: 100%; border-radius: 12px; }
  .mel-app-status-tabs .mel-filter { flex: 1 0 auto; }
  .mel-app-search,
  .mel-app-search input { width: 100% !important; }
  .mel-app-table-wrap { margin-left: 10px; margin-right: 10px; }
}

/* =========================================================
 * v0.9 Customer index + customer workspace
 * Material-inspired components using Melatec brand colours.
 * ======================================================= */
.mel-customers-screen,
.mel-customer-workspace {
  --mel-surface-soft: #f6f9fb;
  --mel-surface-blue: #edf5fa;
  --mel-surface-teal: #e7f5f1;
  --mel-surface-warn: #fff6df;
}

.mel-index-toolbar,
.mel-index-searchrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mel-index-toolbar {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #d8e0e6;
}

.mel-index-tabs {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #ccd7df;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}

.mel-index-tabs .mel-filter {
  min-height: 34px;
  border: 0;
  border-right: 1px solid #dce4e9;
  border-radius: 0;
  background: #fff;
  color: var(--mel-primary);
  padding: 7px 12px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.mel-index-tabs .mel-filter:last-child { border-right: 0; }
.mel-index-tabs .mel-filter span { color: #667085; font-weight: 600; }
.mel-index-tabs .mel-filter.is-active {
  background: var(--mel-primary);
  color: #fff;
}
.mel-index-tabs .mel-filter.is-active span { color: #dcecf6; }

.mel-index-searchrow {
  margin-bottom: 10px;
  color: #667085;
  font-size: 10px;
}

.mel-index-search {
  width: min(360px, 100%);
}

.mel-index-search input {
  width: 100%;
  min-height: 34px;
  border: 1px solid #cbd7df;
  border-radius: 8px;
  background: #fff;
  padding: 7px 11px;
  color: #101828;
  font-size: 10px;
  outline: none;
}

.mel-index-search input:focus {
  border-color: var(--mel-primary-2);
  box-shadow: 0 0 0 3px rgba(12, 121, 186, .10);
}

.mel-customer-table .mel-customer-status-select {
  min-width: 118px;
  height: 30px;
  border: 1px solid #cbd7df;
  border-radius: 6px;
  background: #fff;
  padding: 4px 26px 4px 8px;
  color: #344054;
  font: inherit;
  font-size: 10px;
}

.mel-muted-value {
  color: #98a2b3;
  font-size: 10px;
}

/* Workspace header */
.mel-customer-workspace {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mel-workspace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid #cfdae2;
  border-radius: 12px;
  background: linear-gradient(110deg, #fff 0%, #f9fbfc 62%, #edf5fa 100%);
}

.mel-workspace-account {
  display: block;
  margin-bottom: 4px;
  color: var(--mel-teal, #169D83);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mel-workspace-header h2 {
  margin: 0 0 5px !important;
  color: var(--mel-primary) !important;
  font-family: "Specter Bold", Sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
}

.mel-workspace-header p {
  margin: 0;
  color: #667085;
  font-size: 11px;
}

.mel-workspace-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Summary rail */
.mel-workspace-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid #d3dee5;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.mel-workspace-metric {
  position: relative;
  min-height: 88px;
  padding: 13px 15px;
  border-right: 1px solid #e1e7eb;
  background: #fff;
}

.mel-workspace-metric:last-child { border-right: 0; }
.mel-workspace-metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #b8c7d1;
}
.mel-workspace-metric.is-credit::before { background: #f0bd2d; }
.mel-workspace-metric.is-affordability::before { background: #169d83; }
.mel-workspace-metric.is-application::before { background: #0c79ba; }
.mel-workspace-metric.is-loan::before { background: #023d69; }
.mel-workspace-metric.is-mandate::before { background: #169d83; }

.mel-workspace-metric span,
.mel-workspace-metric strong,
.mel-workspace-metric small { display: block; }
.mel-workspace-metric span {
  color: #667085;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.mel-workspace-metric strong {
  margin-top: 6px;
  color: #023d69;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}
.mel-workspace-metric small {
  margin-top: 5px;
  color: #667085;
  font-size: 9px;
  line-height: 1.25;
}

/* Workspace tabs */
.mel-workspace-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid #cfd9e0;
  scrollbar-width: thin;
}

.mel-workspace-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 40px;
  border: 0;
  background: transparent;
  padding: 8px 13px 10px;
  color: #4b6375;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.mel-workspace-tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}
.mel-workspace-tab:hover { color: #023d69; }
.mel-workspace-tab.is-active { color: #169d83; }
.mel-workspace-tab.is-active::after { background: #169d83; }

.mel-workspace-panel { display: none; }
.mel-workspace-panel.is-active { display: block; }

.mel-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mel-workspace-card,
.mel-record-card {
  border: 1px solid #d5dee4;
  border-radius: 10px;
  background: #fff;
}

.mel-workspace-card { padding: 16px; }
.mel-workspace-card-head,
.mel-record-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.mel-workspace-card-head h3,
.mel-record-card-head strong {
  margin: 0 !important;
  color: #023d69 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.mel-workspace-card-head a {
  color: #0c79ba;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.mel-workspace-next {
  grid-column: 1 / -1;
  background: #edf5fa;
  border-color: #cddfea;
}
.mel-workspace-next p {
  margin: 0;
  color: #4c6374;
  font-size: 11px;
  line-height: 1.5;
}

.mel-data-list {
  margin: 0;
}
.mel-data-list > div {
  display: grid;
  grid-template-columns: minmax(130px, .75fr) minmax(0, 1.25fr);
  gap: 18px;
  padding: 8px 0;
  border-bottom: 1px solid #edf0f2;
}
.mel-data-list > div:last-child { border-bottom: 0; }
.mel-data-list dt,
.mel-data-list dd { margin: 0; }
.mel-data-list dt {
  color: #667085;
  font-size: 10px;
  font-weight: 600;
}
.mel-data-list dd {
  color: #233646;
  font-size: 10px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.mel-workflow-checklist {
  display: flex;
  flex-direction: column;
}
.mel-workflow-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #edf0f2;
}
.mel-workflow-check:last-child { border-bottom: 0; }
.mel-workflow-check-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #d3dce2;
  background: #f6f8fa;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 900;
}
.mel-workflow-check.is-complete .mel-workflow-check-icon {
  border-color: #b9e2d6;
  background: #e7f5f1;
  color: #087c68;
}
.mel-workflow-check strong,
.mel-workflow-check small { display: block; }
.mel-workflow-check strong { color: #344054; font-size: 10px; }
.mel-workflow-check small { margin-top: 2px; color: #667085; font-size: 9px; }

.mel-record-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mel-record-card { padding: 14px; }
.mel-record-card-head span {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 9px;
}

.mel-customer-workspace .mel-app-table-wrap {
  border: 1px solid #d5dee4;
  border-radius: 10px;
  overflow-x: auto;
  background: #fff;
}

@media (max-width: 1180px) {
  .mel-workspace-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mel-workspace-metric:nth-child(3) { border-right: 0; }
  .mel-workspace-metric:nth-child(n+4) { border-top: 1px solid #e1e7eb; }
}

@media (max-width: 900px) {
  .mel-index-toolbar,
  .mel-index-searchrow,
  .mel-workspace-header { align-items: stretch; flex-direction: column; }
  .mel-index-tabs { width: 100%; overflow-x: auto; }
  .mel-index-search { width: 100%; }
  .mel-workspace-actions { justify-content: flex-start; }
  .mel-workspace-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mel-workspace-metric { border-top: 1px solid #e1e7eb; }
  .mel-workspace-metric:nth-child(1), .mel-workspace-metric:nth-child(2) { border-top: 0; }
  .mel-workspace-metric:nth-child(even) { border-right: 0; }
  .mel-workspace-grid,
  .mel-record-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .mel-workspace-summary { grid-template-columns: 1fr; }
  .mel-workspace-metric { border-right: 0; border-top: 1px solid #e1e7eb; }
  .mel-workspace-metric:first-child { border-top: 0; }
  .mel-data-list > div { grid-template-columns: 1fr; gap: 3px; }
  .mel-data-list dd { text-align: left; }
  .mel-workspace-header h2 { font-size: 24px !important; }
}


/* =========================================================
 * v0.9.2 Navigation cleanup
 * One segmented tab language throughout Melatec.
 * Removes active underlines and protects tabs from Elementor button styles.
 * ======================================================= */

/* Primary Applications sections: Affordability Checks / Loan Agreements */
.mel-app .mel-applications-sections,
.mel-app-content-only .mel-applications-sections {
  display: inline-flex !important;
  align-items: stretch !important;
  align-self: center !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #bccbd5 !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.mel-app .mel-applications-sections span,
.mel-app .mel-applications-sections a,
.mel-app-content-only .mel-applications-sections span,
.mel-app-content-only .mel-applications-sections a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 7px 15px !important;
  border: 0 !important;
  border-right: 1px solid #d3dde4 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #36576d !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.mel-app .mel-applications-sections span:last-child,
.mel-app .mel-applications-sections a:last-child,
.mel-app-content-only .mel-applications-sections span:last-child,
.mel-app-content-only .mel-applications-sections a:last-child {
  border-right: 0 !important;
}

.mel-app .mel-applications-sections .is-active,
.mel-app-content-only .mel-applications-sections .is-active {
  background: #dff2ec !important;
  color: #087c68 !important;
}

.mel-app .mel-applications-sections .is-active::after,
.mel-app .mel-applications-sections .is-active::before,
.mel-app-content-only .mel-applications-sections .is-active::after,
.mel-app-content-only .mel-applications-sections .is-active::before {
  content: none !important;
  display: none !important;
}

/* Customer workspace tabs use the same segmented component. */
.mel-app .mel-workspace-tabs,
.mel-app-content-only .mel-workspace-tabs,
.mel-customer-workspace .mel-workspace-tabs {
  display: inline-flex !important;
  align-items: stretch !important;
  align-self: flex-start !important;
  gap: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid #bccbd5 !important;
  border-radius: 10px !important;
  background: #fff !important;
  scrollbar-width: thin;
}

.mel-app .mel-workspace-tab,
.mel-app-content-only .mel-workspace-tab,
.mel-customer-workspace .mel-workspace-tab {
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 7px 13px !important;
  border: 0 !important;
  border-right: 1px solid #d3dde4 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: #fff !important;
  color: #36576d !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.mel-app .mel-workspace-tab:last-child,
.mel-app-content-only .mel-workspace-tab:last-child,
.mel-customer-workspace .mel-workspace-tab:last-child {
  border-right: 0 !important;
}

.mel-app .mel-workspace-tab:hover,
.mel-app-content-only .mel-workspace-tab:hover,
.mel-customer-workspace .mel-workspace-tab:hover {
  background: #f2f7fa !important;
  color: #023d69 !important;
}

.mel-app .mel-workspace-tab.is-active,
.mel-app-content-only .mel-workspace-tab.is-active,
.mel-customer-workspace .mel-workspace-tab.is-active {
  background: #dff2ec !important;
  color: #087c68 !important;
}

.mel-app .mel-workspace-tab::before,
.mel-app .mel-workspace-tab::after,
.mel-app-content-only .mel-workspace-tab::before,
.mel-app-content-only .mel-workspace-tab::after,
.mel-customer-workspace .mel-workspace-tab::before,
.mel-customer-workspace .mel-workspace-tab::after {
  content: none !important;
  display: none !important;
}

.mel-app .mel-workspace-tab:focus,
.mel-app .mel-workspace-tab:focus-visible,
.mel-app-content-only .mel-workspace-tab:focus,
.mel-app-content-only .mel-workspace-tab:focus-visible,
.mel-customer-workspace .mel-workspace-tab:focus,
.mel-customer-workspace .mel-workspace-tab:focus-visible {
  outline: 2px solid rgba(12,121,186,.22) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/* Customer workspace: reduce visual noise and keep hierarchy compact. */
.mel-customer-workspace {
  gap: 12px !important;
}

.mel-customer-workspace .mel-workspace-header {
  padding: 14px 16px !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.mel-customer-workspace .mel-workspace-header h2 {
  font-size: 24px !important;
  line-height: 1.08 !important;
}

.mel-customer-workspace .mel-workspace-summary {
  border-radius: 10px !important;
  background: #f4f8fb !important;
}

.mel-customer-workspace .mel-workspace-metric {
  min-height: 72px !important;
  padding: 11px 13px !important;
  background: #fff !important;
}

.mel-customer-workspace .mel-workspace-metric strong {
  margin-top: 4px !important;
  font-size: 15px !important;
}

.mel-customer-workspace .mel-workspace-metric small {
  margin-top: 3px !important;
  font-size: 8px !important;
}

.mel-customer-workspace .mel-workspace-grid {
  gap: 10px !important;
}

.mel-customer-workspace .mel-workspace-card,
.mel-customer-workspace .mel-record-card {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.mel-customer-workspace .mel-workspace-card {
  padding: 14px !important;
}

.mel-customer-workspace .mel-workspace-next {
  background: #edf5fa !important;
}

@media (max-width: 900px) {
  .mel-app .mel-applications-sections,
  .mel-app-content-only .mel-applications-sections,
  .mel-app .mel-workspace-tabs,
  .mel-app-content-only .mel-workspace-tabs,
  .mel-customer-workspace .mel-workspace-tabs {
    width: 100% !important;
    border-radius: 9px !important;
  }
}

/* =========================================================
 * v0.9.3 Customer workspace containing surface
 * Match the Applications module: one light-blue outer block
 * containing the header, summary, tabs and active content.
 * ======================================================= */
.mel-app .mel-customer-workspace,
.mel-app-content-only .mel-customer-workspace,
.mel-customer-workspace {
  padding: 14px !important;
  gap: 12px !important;
  border: 1px solid #c7d7e2 !important;
  border-radius: 20px !important;
  background: #dbe8f5 !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Inner elements become clean white working surfaces. */
.mel-customer-workspace .mel-workspace-header,
.mel-customer-workspace .mel-workspace-summary,
.mel-customer-workspace .mel-workspace-card,
.mel-customer-workspace .mel-record-card,
.mel-customer-workspace .mel-app-table-wrap {
  background: #fff !important;
}

/* Keep the segmented navigation visually attached to the module. */
.mel-customer-workspace .mel-workspace-tabs {
  margin: 0 !important;
  background: #fff !important;
}

/* Active workspace content should not introduce another outer box. */
.mel-customer-workspace .mel-workspace-panel {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Next-action row is a contained tonal surface, not a loose page strip. */
.mel-customer-workspace .mel-workspace-next {
  border-color: #c8d9e4 !important;
  background: #eef5fa !important;
}

@media (max-width: 900px) {
  .mel-app .mel-customer-workspace,
  .mel-app-content-only .mel-customer-workspace,
  .mel-customer-workspace {
    padding: 10px !important;
    border-radius: 14px !important;
  }
}


/* =========================================================
 * v0.9.5 Shared Applications / Customers module anatomy
 * Customers deliberately reuses Applications components.
 * ======================================================= */
.mel-customers-panel.mel-applications-panel {
  margin: 0;
}

/* A single Customers section tab uses the exact same segmented component. */
.mel-customers-panel .mel-applications-sections {
  width: auto !important;
}

/* Customers filter/search row is exactly the Applications filter row. */
.mel-customers-panel .mel-customers-filterrow {
  margin: 0 !important;
}

/* Keep the customer table contained like the Applications table. */
.mel-customers-panel .mel-app-table-wrap {
  margin: 0 14px 14px !important;
}

/* Customer status dropdown inherits the Applications dropdown in full. */
.mel-customers-panel .mel-customer-status-select {
  min-width: 160px !important;
  width: 100% !important;
  max-width: 220px !important;
}

@media (max-width: 900px) {
  .mel-customers-panel .mel-applications-topbar,
  .mel-customers-panel .mel-applications-filterrow {
    align-items: flex-start;
    flex-direction: column;
  }

  .mel-customers-panel .mel-app-search,
  .mel-customers-panel .mel-app-search input {
    width: 100% !important;
  }
}

/* =========================================================
 * v0.9.6 Unified Melatec component geometry + dashboard
 * One component language across Applications, Customers,
 * Customer Workspace, Micro-Lenders and Dashboard.
 * ======================================================= */
:root {
  --mel-ui-radius-outer: 20px;
  --mel-ui-radius-inner: 12px;
  --mel-ui-radius-control: 10px;
  --mel-ui-radius-pill: 999px;
  --mel-ui-panel: #dbe8f5;
  --mel-ui-border: #c7d7e2;
  --mel-ui-border-soft: #d6e1e8;
  --mel-ui-navy: #023d69;
  --mel-ui-teal: #169d83;
}

/* Outer list modules. */
.mel-applications-panel,
.mel-customers-panel,
.mel-lenders-panel,
.mel-dashboard-module,
.mel-customer-workspace {
  border-radius: var(--mel-ui-radius-outer) !important;
  border-color: var(--mel-ui-border) !important;
  background: var(--mel-ui-panel) !important;
  box-shadow: none !important;
}

/* Inner surfaces use one radius everywhere. */
.mel-app-table-wrap,
.mel-customer-workspace .mel-workspace-header,
.mel-customer-workspace .mel-workspace-summary,
.mel-customer-workspace .mel-workspace-card,
.mel-customer-workspace .mel-record-card,
.mel-customer-workspace .mel-workspace-next,
.mel-dashboard-card,
.mel-dashboard-summary-item,
.mel-compact-table {
  border-radius: var(--mel-ui-radius-inner) !important;
}

/* Search/select controls. */
.mel-app-search input,
.mel-app-table .mel-status-select,
.mel-customer-status-select,
.mel-lender-status-select {
  border-radius: var(--mel-ui-radius-control) !important;
}

/* All screen-level segmented navigation has the same pill silhouette. */
.mel-app .mel-applications-sections,
.mel-app-content-only .mel-applications-sections,
.mel-app .mel-workspace-tabs,
.mel-app-content-only .mel-workspace-tabs,
.mel-customer-workspace .mel-workspace-tabs,
.mel-app-status-tabs {
  border-radius: var(--mel-ui-radius-pill) !important;
  overflow: hidden !important;
}

/* Preserve a continuous pill edge on the customer workspace tabs. */
.mel-workspace-tab:first-child { border-radius: var(--mel-ui-radius-pill) 0 0 var(--mel-ui-radius-pill) !important; }
.mel-workspace-tab:last-child { border-radius: 0 var(--mel-ui-radius-pill) var(--mel-ui-radius-pill) 0 !important; }
.mel-applications-sections > :first-child { border-radius: var(--mel-ui-radius-pill) 0 0 var(--mel-ui-radius-pill) !important; }
.mel-applications-sections > :last-child { border-radius: 0 var(--mel-ui-radius-pill) var(--mel-ui-radius-pill) 0 !important; }
.mel-app-status-tabs .mel-filter:first-child { border-radius: var(--mel-ui-radius-pill) 0 0 var(--mel-ui-radius-pill) !important; }
.mel-app-status-tabs .mel-filter:last-child { border-radius: 0 var(--mel-ui-radius-pill) var(--mel-ui-radius-pill) 0 !important; }

/* Customer workspace spacing/surfaces now mirror list modules. */
.mel-customer-workspace {
  padding: 14px !important;
  gap: 12px !important;
}
.mel-customer-workspace .mel-workspace-header,
.mel-customer-workspace .mel-workspace-card,
.mel-customer-workspace .mel-record-card {
  border: 1px solid var(--mel-ui-border-soft) !important;
}
.mel-customer-workspace .mel-workspace-summary {
  overflow: hidden;
  border: 1px solid var(--mel-ui-border-soft) !important;
}
.mel-customer-workspace .mel-workspace-tabs {
  width: fit-content !important;
  max-width: 100% !important;
  background: #fff !important;
}

/* Lenders is intentionally identical to Applications/Customers. */
.mel-lenders-panel .mel-app-table-wrap { margin: 0 14px 14px !important; }
.mel-lenders-panel .mel-lender-status-select { width: 100% !important; min-width: 150px !important; max-width: 210px !important; }

/* Dashboard is one containing module, not a collection of loose cards. */
.mel-dashboard-module {
  padding: 14px;
  overflow: hidden;
}
.mel-dashboard-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 3px 4px 12px;
}
.mel-dashboard-module-head > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mel-module-label {
  color: var(--mel-ui-navy);
  font-size: 13px;
  font-weight: 800;
}
.mel-dashboard-module-head small { color: #667d8f; font-size: 9px; }

.mel-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.mel-dashboard-summary-item {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--mel-ui-border-soft);
  background: #fff;
  color: var(--mel-ui-navy) !important;
}
.mel-dashboard-summary-item span,
.mel-dashboard-summary-item strong,
.mel-dashboard-summary-item small { display: block; }
.mel-dashboard-summary-item span { margin-bottom: 7px; color: #587389; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.mel-dashboard-summary-item strong { margin-bottom: 4px; font-size: 21px; line-height: 1.1; font-weight: 700; }
.mel-dashboard-summary-item small { color: #718697; font-size: 8.5px; }
.mel-dashboard-summary-item:hover { border-color: #a9c4d5; background: #fbfdff; }

.mel-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, .75fr);
  gap: 12px;
}
.mel-dashboard-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mel-ui-border-soft);
  background: #fff;
}
.mel-module-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e9ee;
}
.mel-module-card-head span { display: block; margin-bottom: 2px; color: var(--mel-ui-teal); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.mel-module-card-head h3,
.mel-app .mel-module-card-head h3 { margin: 0 !important; color: var(--mel-ui-navy) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.2 !important; }
.mel-module-card-head > a { color: var(--mel-ui-teal) !important; font-size: 9px; font-weight: 800; }

.mel-dashboard-pipeline-table { padding: 0 14px 10px; }
.mel-dashboard-pipeline-head,
.mel-dashboard-pipeline-row {
  display: grid;
  grid-template-columns: minmax(135px, 1.4fr) 62px minmax(95px, 1fr) minmax(95px, 1fr);
  gap: 10px;
  align-items: center;
}
.mel-dashboard-pipeline-head { min-height: 32px; color: #718697; font-size: 8px; font-weight: 800; }
.mel-dashboard-pipeline-row { min-height: 40px; border-top: 1px solid #e5ebef; color: #36576d; font-size: 9.5px; }
.mel-dashboard-pipeline-head > *:not(:first-child), .mel-dashboard-pipeline-row > *:not(:first-child) { text-align: right; }
.mel-dashboard-pipeline-row strong { color: var(--mel-ui-navy); }

.mel-dashboard-action-list { padding: 4px 14px 12px; }
.mel-dashboard-action-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; border-bottom: 1px solid #e5ebef; color: #36576d !important; font-size: 9.5px; }
.mel-dashboard-action-list a:last-child { border-bottom: 0; }
.mel-dashboard-action-list strong { min-width: 28px; padding: 4px 8px; border-radius: var(--mel-ui-radius-pill); background: #e4f4ef; color: #087c68; text-align: center; font-size: 9px; }

.mel-dashboard-recent .mel-compact-table-wrap { padding: 12px 14px 14px; overflow-x: auto; }
.mel-dashboard-recent .mel-compact-table { width: 100%; border-collapse: collapse; overflow: hidden; border: 1px solid var(--mel-ui-border-soft); }
.mel-dashboard-recent .mel-compact-table th { padding: 9px 10px !important; background: var(--mel-ui-navy) !important; color: #fff !important; font-size: 8px !important; text-align: left; }
.mel-dashboard-recent .mel-compact-table td { padding: 9px 10px !important; border-bottom: 1px solid #e5ebef !important; background: #fff !important; color: #36576d; font-size: 9px; }
.mel-dashboard-recent .mel-compact-table tbody tr:last-child td { border-bottom: 0 !important; }
.mel-dashboard-recent .mel-compact-table a { color: var(--mel-ui-teal); font-weight: 800; }
.mel-dashboard-recent .mel-compact-table small { display: block; margin-top: 2px; color: #72899a; font-size: 7.5px; }

.mel-dashboard-portfolio-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 12px 14px; overflow: hidden; border: 1px solid #e1e8ed; border-radius: var(--mel-ui-radius-inner); background: #e1e8ed; }
.mel-dashboard-portfolio-metrics > div { padding: 12px; background: #fff; }
.mel-dashboard-portfolio-metrics span, .mel-dashboard-portfolio-metrics strong { display: block; }
.mel-dashboard-portfolio-metrics span { color: #718697; font-size: 8px; }
.mel-dashboard-portfolio-metrics strong { margin-top: 4px; color: var(--mel-ui-navy); font-size: 18px; }
.mel-dashboard-risk-row { padding: 0 14px 11px; }
.mel-dashboard-risk-row > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; color: #536f83; font-size: 8.5px; }
.mel-dashboard-risk-row > div:last-child { height: 4px; overflow: hidden; border-radius: var(--mel-ui-radius-pill); background: #e7edf1; }
.mel-dashboard-risk-row i { display: block; height: 100%; border-radius: var(--mel-ui-radius-pill); background: var(--mel-ui-teal); }
.mel-dashboard-collection-row { display: flex; gap: 8px; margin: 3px 14px 14px; padding-top: 10px; border-top: 1px solid #e5ebef; }
.mel-dashboard-collection-row span { flex: 1; color: #617b8e; font-size: 8.5px; }
.mel-dashboard-collection-row strong { color: var(--mel-ui-navy); }

@media (max-width: 1050px) {
  .mel-dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mel-dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .mel-dashboard-module { padding: 10px; border-radius: 14px !important; }
  .mel-dashboard-summary { grid-template-columns: 1fr; }
  .mel-dashboard-pipeline-head, .mel-dashboard-pipeline-row { grid-template-columns: minmax(120px, 1.4fr) 45px 80px 80px; }
  .mel-customer-workspace { border-radius: 14px !important; }
}

/* =========================================================
 * v0.9.7 Dashboard visual system
 * Richer finance-dashboard presentation using the established
 * Melatec panel/table language, with icons, charts and contrast.
 * ======================================================= */
.mel-dashboard-rich {
  padding: 14px !important;
  background: var(--mel-ui-panel) !important;
}

.mel-dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  padding: 2px 3px 12px;
}
.mel-dashboard-toolbar > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.mel-dashboard-toolbar-label {
  color: var(--mel-ui-navy);
  font-size: 13px;
  font-weight: 800;
}
.mel-dashboard-toolbar small {
  color: #667d8f;
  font-size: 9px;
}
.mel-dashboard-report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid #9db8c9;
  border-radius: 999px;
  background: #fff;
  color: var(--mel-ui-navy) !important;
  font-size: 9px;
  font-weight: 800;
}
.mel-dashboard-report-link span { font-size: 15px; line-height: 1; }

.mel-dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.mel-dashboard-kpi {
  position: relative;
  min-width: 0;
  min-height: 122px;
  padding: 14px 15px 13px;
  overflow: hidden;
  border: 1px solid var(--mel-ui-border-soft);
  border-radius: var(--mel-ui-radius-inner);
  background: #fff;
  color: var(--mel-ui-navy) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.mel-dashboard-kpi:hover {
  transform: translateY(-1px);
  border-color: #a9c2d2;
  box-shadow: 0 8px 18px rgba(2,61,105,.06);
}
.mel-dashboard-kpi.is-teal { background: linear-gradient(135deg,#fff 0%,#eef9f6 100%); }
.mel-dashboard-kpi.is-blue { background: linear-gradient(135deg,#fff 0%,#eef6fb 100%); }
.mel-dashboard-kpi.is-approved { background: linear-gradient(135deg,#fff 0%,#eff9f2 100%); }
.mel-dashboard-kpi.is-navy {
  border-color: #023d69;
  background: linear-gradient(135deg,#023d69 0%,#07537e 100%);
  color: #fff !important;
}
.mel-dashboard-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.mel-dashboard-kpi-icon,
.mel-dashboard-title-icon,
.mel-attention-row-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.mel-dashboard-kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #e7f5f1;
  color: #169d83;
}
.mel-dashboard-kpi.is-blue .mel-dashboard-kpi-icon { background: #e8f2f9; color: #0c79ba; }
.mel-dashboard-kpi.is-approved .mel-dashboard-kpi-icon { background: #e6f5eb; color: #11864d; }
.mel-dashboard-kpi.is-navy .mel-dashboard-kpi-icon { background: rgba(255,255,255,.13); color: #fff; }
.mel-dashboard-kpi-icon svg,
.mel-dashboard-title-icon svg,
.mel-attention-row-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mel-dashboard-kpi-arrow {
  color: #8198a8;
  font-size: 18px;
  line-height: 1;
}
.mel-dashboard-kpi.is-navy .mel-dashboard-kpi-arrow { color: rgba(255,255,255,.6); }
.mel-dashboard-kpi-label,
.mel-dashboard-kpi > strong,
.mel-dashboard-kpi > small { display: block; }
.mel-dashboard-kpi-label {
  margin-bottom: 3px;
  color: #5c778a;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.mel-dashboard-kpi > strong {
  color: var(--mel-ui-navy);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.05;
}
.mel-dashboard-kpi > small {
  margin-top: 4px;
  color: #6b8192;
  font-size: 8.5px;
}
.mel-dashboard-kpi.is-navy .mel-dashboard-kpi-label,
.mel-dashboard-kpi.is-navy > strong { color: #fff; }
.mel-dashboard-kpi.is-navy > small { color: rgba(255,255,255,.7); }
.mel-dashboard-kpi-progress {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 11px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2,61,105,.10);
}
.mel-dashboard-kpi-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #169d83;
}

.mel-dashboard-rich-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(285px, .72fr);
  gap: 12px;
}
.mel-dashboard-rich-grid > .mel-dashboard-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mel-ui-border-soft) !important;
  border-radius: var(--mel-ui-radius-inner) !important;
  background: #fff !important;
  box-shadow: 0 6px 16px rgba(2,61,105,.035) !important;
}
.mel-dashboard-card-head-rich {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  border-bottom: 1px solid #e1e8ed;
  background: #fff;
}
.mel-dashboard-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mel-dashboard-title-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.mel-dashboard-title-icon.is-blue { background: #e8f2f9; color: #0c79ba; }
.mel-dashboard-title-icon.is-teal { background: #e7f5f1; color: #169d83; }
.mel-dashboard-title-icon.is-navy { background: #e6eef3; color: #023d69; }
.mel-dashboard-title-icon.is-gold { background: #fff2cf; color: #c78b00; }
.mel-dashboard-card-title > div > span {
  display: block;
  margin-bottom: 2px;
  color: #169d83;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .065em;
}
.mel-dashboard-card-title h3,
.mel-app .mel-dashboard-card-title h3 {
  margin: 0 !important;
  color: var(--mel-ui-navy) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
.mel-dashboard-card-head-rich > a {
  color: #169d83 !important;
  font-size: 9px;
  font-weight: 800;
}
.mel-dashboard-rate {
  min-width: 76px;
  padding-left: 12px;
  border-left: 1px solid #e2e9ed;
  text-align: right;
}
.mel-dashboard-rate strong,
.mel-dashboard-rate span { display: block; }
.mel-dashboard-rate strong { color: #169d83; font-size: 16px; }
.mel-dashboard-rate span { margin-top: 2px; color: #748b9a; font-size: 7.5px; }

/* Visual pipeline chart */
.mel-pipeline-chart { padding: 8px 14px 14px; }
.mel-pipeline-chart-row {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(160px, 1.4fr) minmax(100px, .7fr);
  gap: 13px;
  align-items: center;
  min-height: 50px;
  border-bottom: 1px solid #e7edf1;
}
.mel-pipeline-chart-row:last-child { border-bottom: 0; }
.mel-pipeline-chart-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #36576d;
  font-size: 9px;
  font-weight: 700;
}
.mel-pipeline-chart-label strong {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef4f8;
  color: #023d69;
  font-size: 9px;
}
.mel-pipeline-chart-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef2;
}
.mel-pipeline-chart-track i {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: #0c79ba;
}
.mel-pipeline-chart-row.is-gold .mel-pipeline-chart-track i { background: #f0bd2d; }
.mel-pipeline-chart-row.is-teal .mel-pipeline-chart-track i { background: #169d83; }
.mel-pipeline-chart-row.is-red .mel-pipeline-chart-track i { background: #e15b64; }
.mel-pipeline-chart-row.is-navy .mel-pipeline-chart-track i { background: #023d69; }
.mel-pipeline-chart-value { text-align: right; }
.mel-pipeline-chart-value strong,
.mel-pipeline-chart-value small { display: block; }
.mel-pipeline-chart-value strong { color: #023d69; font-size: 9.5px; }
.mel-pipeline-chart-value small { margin-top: 2px; color: #718697; font-size: 7.5px; }

/* Strong contrast attention panel */
.mel-dashboard-rich-grid > .mel-dashboard-attention-rich {
  border-color: #023d69 !important;
  background: #023d69 !important;
}
.mel-dashboard-attention-rich .mel-dashboard-card-head-rich {
  border-bottom-color: rgba(255,255,255,.12);
  background: transparent;
}
.mel-dashboard-attention-rich .mel-dashboard-card-title > div > span { color: #79d8c8; }
.mel-dashboard-attention-rich .mel-dashboard-card-title h3,
.mel-app .mel-dashboard-attention-rich .mel-dashboard-card-title h3 { color: #fff !important; }
.mel-dashboard-attention-count {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f0bd2d;
  color: #023d69;
  font-size: 11px;
  font-weight: 900;
}
.mel-dashboard-attention-list-rich { padding: 6px 12px 12px; }
.mel-dashboard-attention-list-rich a {
  display: grid;
  grid-template-columns: 28px 1fr auto 18px;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  color: #fff !important;
}
.mel-dashboard-attention-list-rich a:last-child { border-bottom: 0; }
.mel-attention-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(255,255,255,.10);
  color: #82dccc;
}
.mel-attention-row-icon svg { width: 14px; height: 14px; }
.mel-attention-row-label { color: rgba(255,255,255,.84); font-size: 9px; font-weight: 700; }
.mel-dashboard-attention-list-rich strong {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 9px;
}
.mel-attention-row-arrow { color: rgba(255,255,255,.48); font-size: 16px; }

/* Dashboard table intentionally reuses list/table language. */
.mel-dashboard-recent-rich { grid-column: 1; }
.mel-dashboard-table-wrap {
  margin: 12px 14px 14px !important;
  border-radius: var(--mel-ui-radius-inner) !important;
}
.mel-dashboard-table { min-width: 720px !important; }
.mel-dashboard-table thead th { background: #023d69 !important; color: #fff !important; }
.mel-dashboard-table .mel-app-action a {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #9db8c9;
  background: #fff;
  color: #023d69 !important;
}

/* Donut chart + portfolio health */
.mel-dashboard-health-rich { grid-column: 2; }
.mel-dashboard-health-body {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 14px 12px;
}
.mel-risk-donut-wrap { display: grid; place-items: center; }
.mel-risk-donut {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(2,61,105,.04);
}
.mel-risk-donut > div {
  width: 72px;
  height: 72px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #e3e9ed;
  text-align: center;
}
.mel-risk-donut strong,
.mel-risk-donut span { display: block; }
.mel-risk-donut strong { color: #023d69; font-size: 22px; line-height: 1; }
.mel-risk-donut span { margin-top: 4px; color: #728899; font-size: 7.5px; }
.mel-risk-legend { display: flex; flex-direction: column; gap: 9px; }
.mel-risk-legend > div {
  display: grid;
  grid-template-columns: 9px 1fr;
  gap: 8px;
  align-items: start;
}
.mel-risk-legend > div > span {
  width: 9px;
  height: 9px;
  margin-top: 3px;
  border-radius: 50%;
}
.mel-risk-legend .is-high { background: #f0bd2d; }
.mel-risk-legend .is-medium { background: #169d83; }
.mel-risk-legend .is-low { background: #0c79ba; }
.mel-risk-legend p,
.mel-risk-legend strong,
.mel-risk-legend small { margin: 0; display: block; }
.mel-risk-legend strong { color: #36576d; font-size: 9px; }
.mel-risk-legend small { margin-top: 2px; color: #7b8f9e; font-size: 7.5px; }
.mel-mandate-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 2px 14px 14px;
  overflow: hidden;
  border: 1px solid #e1e8ed;
  border-radius: 10px;
  background: #e1e8ed;
}
.mel-mandate-mini-grid > div { padding: 10px 11px; background: #f9fbfc; }
.mel-mandate-mini-grid span,
.mel-mandate-mini-grid strong { display: block; }
.mel-mandate-mini-grid span { color: #738899; font-size: 7.5px; }
.mel-mandate-mini-grid strong { margin-top: 3px; color: #023d69; font-size: 15px; }

@media (max-width: 1050px) {
  .mel-dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mel-dashboard-rich-grid { grid-template-columns: 1fr; }
  .mel-dashboard-recent-rich,
  .mel-dashboard-health-rich { grid-column: auto; }
}
@media (max-width: 700px) {
  .mel-dashboard-toolbar { align-items: flex-start; flex-direction: column; }
  .mel-dashboard-kpi-grid { grid-template-columns: 1fr; }
  .mel-pipeline-chart-row { grid-template-columns: 1fr; gap: 7px; padding: 9px 0; }
  .mel-pipeline-chart-value { text-align: left; }
  .mel-dashboard-health-body { grid-template-columns: 1fr; }
}

/* ============================================================
   v0.10.0 Guided workflow: micro-lender onboarding + approval
   ============================================================ */
.mel-onboarding-dashboard,
.mel-lender-onboarding {
  --mel-onboard-bg: #dbe8f5;
  --mel-onboard-navy: #023d69;
  --mel-onboard-teal: #169d83;
  --mel-onboard-border: #c7d8e6;
  --mel-onboard-muted: #667085;
}

.mel-onboarding-shell {
  background: var(--mel-onboard-bg, #dbe8f5);
  border: 1px solid #c7d8e6;
  border-radius: 20px;
  padding: 16px;
  color: #023d69;
}

.mel-onboarding-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border: 1px solid #c7d8e6;
  border-radius: 12px;
  padding: 20px 22px;
}

.mel-onboarding-hero h2,
.mel-onboarding-form-head h3,
.mel-onboarding-ready h3,
.mel-access-locked h2 {
  margin: 3px 0 4px;
  color: #023d69;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
}

.mel-onboarding-hero h2 { font-size: 24px; }
.mel-onboarding-form-head h3,
.mel-onboarding-ready h3 { font-size: 18px; }
.mel-access-locked h2 { font-size: 24px; }

.mel-onboarding-hero p,
.mel-onboarding-form-head p,
.mel-onboarding-ready p,
.mel-access-locked p {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

.mel-onboarding-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.mel-onboarding-percent {
  min-width: 86px;
  text-align: right;
}
.mel-onboarding-percent strong {
  display: block;
  color: #023d69;
  font-size: 27px;
  line-height: 1;
}
.mel-onboarding-percent span {
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}

.mel-onboarding-progress {
  height: 8px;
  overflow: hidden;
  margin: 12px 2px 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid #c7d8e6;
  border-radius: 999px;
}
.mel-onboarding-progress i {
  display: block;
  height: 100%;
  min-width: 0;
  background: linear-gradient(90deg, #169d83 0%, #0c79ba 100%);
  border-radius: inherit;
  transition: width .25s ease;
}

.mel-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.mel-onboarding-step {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 10px;
  background: rgba(255,255,255,.7);
  border: 1px solid #c7d8e6;
  border-radius: 12px;
  color: #023d69;
  text-decoration: none !important;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.mel-onboarding-step:hover {
  background: #fff;
  border-color: #8eb3cf;
  transform: translateY(-1px);
}
.mel-onboarding-step > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border: 1px solid #a9bfd0;
  border-radius: 50%;
  background: #fff;
  color: #023d69;
  font-size: 11px;
  font-weight: 800;
}
.mel-onboarding-step strong,
.mel-onboarding-step small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mel-onboarding-step strong { font-size: 11px; }
.mel-onboarding-step small {
  margin-top: 2px;
  color: #718096;
  font-size: 9px;
}
.mel-onboarding-step.is-complete {
  border-color: #a9d9cf;
  background: #edf9f6;
}
.mel-onboarding-step.is-complete > span {
  border-color: #169d83;
  background: #169d83;
  color: #fff;
}
.mel-onboarding-step.is-active {
  border-color: #0c79ba;
  background: #fff;
  box-shadow: inset 0 0 0 1px #0c79ba;
}

.mel-onboarding-form-panel {
  overflow: hidden;
  background: #fff;
  border: 1px solid #c7d8e6;
  border-radius: 12px;
}
.mel-onboarding-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px;
  border-bottom: 1px solid #d7e2eb;
}
.mel-step-number {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #edf4fa;
  color: #023d69;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.mel-onboarding-form {
  padding: 18px 20px 4px;
}

/* The existing Formidable section dividers are now the content container,
   so suppress duplicate large section-title treatment inside the guided UI. */
.mel-lender-onboarding .mel-onboarding-form .frm_section_heading > h3,
.mel-lender-onboarding .mel-onboarding-form .frm_pos_top.frm_section_spacing > h3 {
  font-size: 16px !important;
  color: #023d69 !important;
}
.mel-lender-onboarding .mel-onboarding-form .frm_submit {
  padding-top: 8px;
  padding-bottom: 16px;
  justify-content: flex-end;
}
.mel-lender-onboarding .mel-onboarding-form .frm_button_submit {
  min-height: 40px !important;
  border-radius: 999px !important;
  padding: 0 20px !important;
}

.mel-onboarding-ready {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 14px;
  padding: 17px 20px;
  background: #edf9f6;
  border: 1px solid #a9d9cf;
  border-radius: 12px;
}

.mel-onboarding-summary {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.mel-onboarding-summary > div {
  min-height: 67px;
  padding: 13px 15px;
  border: 1px solid #c7d8e6;
  border-radius: 12px;
  background: #fff;
}
.mel-onboarding-summary span,
.mel-onboarding-summary strong {
  display: block;
}
.mel-onboarding-summary span {
  color: #667085;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mel-onboarding-summary strong {
  margin-top: 5px;
  color: #023d69;
  font-size: 14px;
}

.mel-access-locked {
  padding: 28px;
}
.mel-access-locked .mel-btn { margin-top: 14px; }

.mel-profile-progress-cell {
  min-width: 125px;
}
.mel-profile-progress-cell strong,
.mel-profile-progress-cell small { display: block; }
.mel-profile-progress-cell > span {
  display: block;
  height: 5px;
  margin: 6px 0 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5edf2;
}
.mel-profile-progress-cell > span i {
  display: block;
  height: 100%;
  background: #169d83;
  border-radius: inherit;
}
.mel-profile-progress-cell small {
  color: #667085;
  font-size: 9px;
}

.mel-lender-actions {
  min-width: 155px;
  white-space: nowrap;
}
.mel-approve-lender {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  margin-right: 7px;
  border: 0;
  border-radius: 999px;
  background: #169d83;
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.mel-approve-lender:hover { background: #117d69; }
.mel-approve-lender:disabled { opacity: .6; cursor: wait; }

@media (max-width: 1180px) {
  .mel-onboarding-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mel-onboarding-shell { padding: 10px; border-radius: 16px; }
  .mel-onboarding-hero,
  .mel-onboarding-ready,
  .mel-onboarding-form-head { flex-direction: column; }
  .mel-onboarding-hero-actions { width: 100%; justify-content: space-between; }
  .mel-onboarding-percent { text-align: left; }
  .mel-onboarding-steps { grid-template-columns: 1fr 1fr; }
  .mel-onboarding-summary { grid-template-columns: 1fr; }
  .mel-onboarding-form { padding: 14px; }
}
@media (max-width: 480px) {
  .mel-onboarding-steps { grid-template-columns: 1fr; }
}

/* v0.10.1 guided onboarding validation notice */
.mel-notice-warning {
    border: 1px solid rgba(235,147,35,.35);
    border-left: 4px solid var(--mel-warning, #EB9323);
    background: #fff8ed;
    color: var(--mel-navy, #023D69);
    margin: 16px 0;
}
.mel-notice-warning strong { display: block; margin-bottom: 3px; }


/* ======================================================================
 * v0.10.5 - Unified Melatec action button system
 * One geometry and typography system across index/action screens.
 * ====================================================================== */
.mel-app {
  --mel-action-height: 36px;
  --mel-action-height-sm: 32px;
  --mel-action-radius: 999px;
}

/* Base action. High specificity prevents theme / Elementor button leakage. */
.mel-app a.mel-btn,
.mel-app button.mel-btn,
.mel-app input.mel-btn,
.mel-app a.mel-app-new,
.mel-app button.mel-app-text-action,
.mel-app .mel-lender-actions > a,
.mel-app .mel-lender-actions > button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: var(--mel-action-height) !important;
  height: var(--mel-action-height) !important;
  padding: 0 17px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--mel-action-radius) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

.mel-app a.mel-btn-small,
.mel-app button.mel-btn-small,
.mel-app .mel-lender-actions > a,
.mel-app .mel-lender-actions > button {
  min-height: var(--mel-action-height-sm) !important;
  height: var(--mel-action-height-sm) !important;
  padding: 0 13px !important;
  font-size: 10px !important;
}

/* Primary = main forward/create action. */
.mel-app .mel-btn-primary,
.mel-app a.mel-app-new {
  border-color: #023D69 !important;
  background: #023D69 !important;
  color: #fff !important;
}
.mel-app .mel-btn-primary:hover,
.mel-app a.mel-app-new:hover {
  border-color: #07527f !important;
  background: #07527f !important;
  color: #fff !important;
}

/* Success = explicit approval/positive workflow action. */
.mel-app .mel-btn-success,
.mel-app button.mel-approve-lender {
  border-color: #169D83 !important;
  background: #169D83 !important;
  color: #fff !important;
}
.mel-app .mel-btn-success:hover,
.mel-app button.mel-approve-lender:hover {
  border-color: #117d69 !important;
  background: #117d69 !important;
  color: #fff !important;
}

/* Tonal = supporting utility action such as Export. */
.mel-app .mel-btn-tonal,
.mel-app button.mel-app-text-action {
  border-color: #D9F0E9 !important;
  background: #DDF3EC !important;
  color: #075D4F !important;
}
.mel-app .mel-btn-tonal:hover,
.mel-app button.mel-app-text-action:hover {
  border-color: #C7E7DD !important;
  background: #CCEAE1 !important;
  color: #075D4F !important;
}

/* Outline = secondary/open/review action. */
.mel-app .mel-btn-outline,
.mel-app .mel-btn-secondary,
.mel-app .mel-lender-actions > a.mel-lender-review {
  border-color: #0B5C8E !important;
  background: #fff !important;
  color: #023D69 !important;
}
.mel-app .mel-btn-outline:hover,
.mel-app .mel-btn-secondary:hover,
.mel-app .mel-lender-actions > a.mel-lender-review:hover {
  border-color: #023D69 !important;
  background: #F1F7FA !important;
  color: #023D69 !important;
}

.mel-app .mel-btn:focus-visible,
.mel-app .mel-app-new:focus-visible,
.mel-app .mel-app-text-action:focus-visible,
.mel-app .mel-lender-actions > a:focus-visible,
.mel-app .mel-lender-actions > button:focus-visible {
  outline: 3px solid rgba(12,121,186,.22) !important;
  outline-offset: 2px !important;
}

.mel-app .mel-btn:active,
.mel-app .mel-app-new:active,
.mel-app .mel-app-text-action:active { transform: translateY(1px); }

.mel-app .mel-btn:disabled,
.mel-app .mel-app-text-action:disabled,
.mel-app button.mel-approve-lender:disabled {
  opacity: .55 !important;
  cursor: wait !important;
}

/* Lender row actions: consistent geometry and spacing. */
.mel-app .mel-lender-actions {
  min-width: 166px;
  white-space: nowrap;
}
.mel-app .mel-lender-actions > button + a,
.mel-app .mel-lender-actions > a + button { margin-left: 7px !important; }
.mel-app .mel-lender-actions > a span { font-size: 13px; line-height: 1; }

/* ============================================================
   v0.11.0 Customer onboarding + approval
   ============================================================ */
.mel-customer-onboarding,
.mel-customer-new,
.mel-onboarding-dashboard {
  --mel-onboard-bg: #dbe8f5;
  --mel-onboard-navy: #023d69;
  --mel-onboard-teal: #169d83;
  --mel-onboard-border: #c7d8e6;
  --mel-onboard-muted: #667085;
}

.mel-customer-onboarding .mel-onboarding-steps { grid-template-columns: repeat(6, minmax(0,1fr)); }

.mel-customer-statusline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 14px;
  padding: 10px 13px;
  border: 1px solid #c7d8e6;
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  font-size: 11px;
}
.mel-customer-statusline span {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff3d8;
  color: #925f00;
  font-weight: 800;
}
.mel-customer-statusline strong { color: #023d69; }

.mel-onboarding-content {
  overflow: hidden;
  background: #fff;
  border: 1px solid #c7d8e6;
  border-radius: 12px;
}
.mel-onboarding-content-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #d7e2eb;
}
.mel-onboarding-content-head h2 {
  margin: 3px 0 4px;
  color: #023d69;
  font-size: 20px;
  line-height: 1.2;
}
.mel-onboarding-content-head p {
  margin: 0;
  color: #667085;
  font-size: 12px;
}
.mel-step-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #edf4fa;
  color: #023d69;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.mel-customer-form { padding: 20px; }
.mel-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 15px 18px;
}
.mel-field { display: block; min-width: 0; }
.mel-field > span {
  display: block;
  margin: 0 0 6px;
  color: #344054;
  font-size: 11px;
  font-weight: 750;
}
.mel-field > span b { color: #b42318; }
.mel-field input,
.mel-field select {
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border: 1px solid #c8d5df !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #1d2939 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 12px !important;
}
.mel-field input:focus,
.mel-field select:focus {
  outline: 0 !important;
  border-color: #0c79ba !important;
  box-shadow: 0 0 0 3px rgba(12,121,186,.12) !important;
}
.mel-field input[readonly] { background: #f4f7f9 !important; color: #667085 !important; }
.mel-form-section-title {
  grid-column: 1 / -1;
  padding: 5px 0 2px;
}
.mel-form-section-title strong,
.mel-form-section-title span { display: block; }
.mel-form-section-title strong { color: #023d69; font-size: 13px; }
.mel-form-section-title span { margin-top: 3px; color: #667085; font-size: 10px; }
.mel-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #344054;
  font-size: 11px;
}
.mel-check-row input { width: 16px; height: 16px; margin: 0; }
.mel-span-2 { grid-column: 1 / -1; }
.mel-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e4eaf0;
}

.mel-onboarding-warning,
.mel-onboarding-success,
.mel-onboarding-complete {
  margin: 12px 0;
  padding: 13px 15px;
  border-radius: 10px;
}
.mel-onboarding-warning { border: 1px solid #f0c36c; background: #fff8e8; color: #805500; }
.mel-onboarding-success,
.mel-onboarding-complete { border: 1px solid #a9d9cf; background: #edf9f6; color: #075d4f; }
.mel-onboarding-warning strong,
.mel-onboarding-warning span,
.mel-onboarding-success strong,
.mel-onboarding-success span { display: block; }
.mel-onboarding-warning span,
.mel-onboarding-success span { margin-top: 3px; font-size: 11px; line-height: 1.45; }
.mel-onboarding-complete { margin-top: 14px; }
.mel-onboarding-complete h2 { margin: 3px 0 4px; color: #075d4f; font-size: 19px; }
.mel-onboarding-complete p { margin: 0; color: #4b6f68; font-size: 12px; }
.mel-onboarding-complete .mel-btn { margin-top: 12px; }

.mel-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 20px;
}
.mel-review-card {
  border: 1px solid #d7e2eb;
  border-radius: 10px;
  background: #fff;
  padding: 15px;
}
.mel-review-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.mel-review-card-head h3 { margin: 4px 0 0; color: #023d69; font-size: 14px; }
.mel-review-card-head a { color: #0b5c8e; font-size: 10px; font-weight: 800; text-decoration: none; }
.mel-review-state {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mel-review-state.is-complete { background: #e8f7f2; color: #08705d; }
.mel-review-state.is-pending { background: #fff1dd; color: #9a5b00; }
.mel-review-card dl { margin: 0; }
.mel-review-card dl > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 9px;
  padding: 7px 0;
  border-top: 1px solid #eef2f5;
  font-size: 10px;
}
.mel-review-card dt { color: #667085; }
.mel-review-card dd { margin: 0; color: #1d2939; font-weight: 650; }
.mel-customer-review > .mel-form-actions { margin: 0 20px 20px; }

.mel-profile-progress {
  display: grid;
  grid-template-columns: 86px auto;
  align-items: center;
  gap: 3px 9px;
  min-width: 130px;
  color: #023d69 !important;
  text-decoration: none !important;
}
.mel-profile-progress > span {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5edf2;
}
.mel-profile-progress > span i { display: block; height: 100%; border-radius: inherit; background: #169d83; }
.mel-profile-progress strong { font-size: 10px; }
.mel-profile-progress small { grid-column: 1 / -1; color: #667085; font-size: 9px; }
.mel-status-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; min-width: 155px; }
.mel-status-actions .mel-save-state { flex-basis: 100%; }
.mel-workspace-profile-lock { margin-top: 0; }

.mel-app button[data-mel-approve-customer] { border-color: #169D83 !important; background: #169D83 !important; color: #fff !important; }
.mel-app button[data-mel-approve-customer]:hover { border-color: #117d69 !important; background: #117d69 !important; }
.mel-app button[data-mel-approve-customer]:disabled { opacity: .55 !important; cursor: wait !important; }

@media (max-width: 1180px) {
  .mel-customer-onboarding .mel-onboarding-steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .mel-customer-onboarding .mel-onboarding-steps { grid-template-columns: 1fr 1fr; }
  .mel-onboarding-content-head { flex-direction: column; }
  .mel-form-grid,
  .mel-review-grid { grid-template-columns: 1fr; }
  .mel-customer-form { padding: 14px; }
  .mel-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .mel-form-actions .mel-btn { width: 100%; }
}
@media (max-width: 480px) {
  .mel-customer-onboarding .mel-onboarding-steps { grid-template-columns: 1fr; }
}


/* v0.11.3 Dedicated customer profile wizard */
.mel-customer-onboarding { width:100%; max-width:1320px; margin:0 auto; }
.mel-customer-onboarding .mel-onboarding-shell { padding:14px; border-radius:20px; background:#dbe8f5; border-color:#c5d8e7; }
.mel-customer-onboarding .mel-onboarding-hero { padding:24px 26px; border-radius:12px; }
.mel-customer-onboarding .mel-onboarding-hero h2 { font-family:"Specter Bold",Sans-serif; font-size:clamp(28px,3vw,40px); font-weight:600; letter-spacing:-.02em; }
.mel-customer-onboarding .mel-onboarding-hero p { max-width:760px; font-size:12px; }
.mel-customer-onboarding .mel-onboarding-progress { margin:10px 2px 12px; height:6px; border:0; background:rgba(255,255,255,.76); }
.mel-customer-onboarding .mel-customer-statusline { margin:0 0 12px; min-height:42px; padding:8px 12px; background:rgba(255,255,255,.72); }
.mel-customer-onboarding .mel-onboarding-steps { gap:7px; margin-bottom:12px; }
.mel-customer-onboarding .mel-onboarding-step { min-height:58px; padding:9px 10px; border-radius:12px; }
.mel-customer-onboarding .mel-onboarding-step > span { width:25px; height:25px; flex-basis:25px; }
.mel-customer-onboarding .mel-onboarding-content { border-radius:12px; box-shadow:0 10px 30px rgba(2,61,105,.05); }
.mel-customer-onboarding .mel-onboarding-content-head { padding:20px 24px; }
.mel-customer-onboarding .mel-onboarding-content-head h2 { font-family:"Specter Bold",Sans-serif; font-size:26px; font-weight:600; }
.mel-customer-onboarding .mel-customer-form { padding:24px; }
.mel-customer-onboarding .mel-form-grid { gap:17px 20px; }
.mel-customer-onboarding .mel-field > span { margin-bottom:7px; color:#023d69; font-size:10.5px; font-weight:750; }
.mel-customer-onboarding .mel-field input, .mel-customer-onboarding .mel-field select { min-height:46px !important; padding:10px 13px !important; border-radius:10px !important; border-color:#adc4d5 !important; font-size:12px !important; }
.mel-customer-onboarding .mel-form-actions { margin-top:24px; padding-top:18px; }
.mel-customer-onboarding .mel-form-actions .mel-btn { min-height:40px !important; padding-left:18px !important; padding-right:18px !important; }
.mel-online-account-created .mel-online-account-actions { display:flex; justify-content:flex-end; padding-top:10px; }
@media (max-width:760px){ .mel-customer-onboarding .mel-onboarding-shell{padding:9px}.mel-customer-onboarding .mel-onboarding-hero,.mel-customer-onboarding .mel-onboarding-content-head,.mel-customer-onboarding .mel-customer-form{padding:16px} }

/* v0.11.5 Customer profile first-step state */
.mel-onboarding-step.is-locked {
    opacity: .58;
    cursor: default;
    pointer-events: none;
}


/* v0.11.7 customer onboarding refinements */
.mel-app .mel-customer-onboarding .mel-review-card .mel-review-card-head h3,
.mel-customer-onboarding .mel-review-card .mel-review-card-head h3 {
  margin: 4px 0 0 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #023d69 !important;
}
.mel-customer-onboarding .mel-review-card-head { align-items: center; }
.mel-customer-onboarding .mel-review-card dl > div { font-size: 11px; }
.mel-customer-onboarding .mel-postal-fields { grid-column: 1 / -1; }
.mel-customer-onboarding .mel-postal-fields > .mel-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 20px; }
.mel-customer-onboarding .mel-postal-fields.is-same { display:none; }
@media (max-width:760px){ .mel-customer-onboarding .mel-postal-fields > .mel-form-grid{grid-template-columns:1fr;} }


/* ======================================================================
 * v0.11.8 - Customer assisted-create route + UI hardening
 * ====================================================================== */

/* Make the main customer flow actions immune to Elementor/theme button states. */
body .mel-app a.mel-btn.mel-btn-primary,
body .mel-app button.mel-btn.mel-btn-primary,
body .mel-app input.mel-btn.mel-btn-primary,
body .mel-app a.mel-btn:not(.mel-btn-outline):not(.mel-btn-secondary):not(.mel-btn-success):not(.mel-btn-tonal),
body .mel-app button.mel-btn:not(.mel-btn-outline):not(.mel-btn-secondary):not(.mel-btn-success):not(.mel-btn-tonal) {
  border-color: #023D69 !important;
  background: #023D69 !important;
  background-color: #023D69 !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body .mel-app a.mel-btn.mel-btn-primary:hover,
body .mel-app a.mel-btn.mel-btn-primary:focus,
body .mel-app a.mel-btn.mel-btn-primary:active,
body .mel-app a.mel-btn.mel-btn-primary:visited,
body .mel-app button.mel-btn.mel-btn-primary:hover,
body .mel-app button.mel-btn.mel-btn-primary:focus,
body .mel-app button.mel-btn.mel-btn-primary:active,
body .mel-app button.mel-btn:not(.mel-btn-outline):not(.mel-btn-secondary):not(.mel-btn-success):not(.mel-btn-tonal):hover,
body .mel-app button.mel-btn:not(.mel-btn-outline):not(.mel-btn-secondary):not(.mel-btn-success):not(.mel-btn-tonal):focus,
body .mel-app button.mel-btn:not(.mel-btn-outline):not(.mel-btn-secondary):not(.mel-btn-success):not(.mel-btn-tonal):active {
  border-color: #07527F !important;
  background: #07527F !important;
  background-color: #07527F !important;
  color: #fff !important;
}

/* Customer wizard inputs need a visible, consistent outline on every field type. */
body .mel-app .mel-customer-onboarding .mel-field input:not([type="checkbox"]):not([type="hidden"]),
body .mel-app .mel-customer-onboarding .mel-field select,
body .mel-app .mel-customer-new .mel-field input:not([type="checkbox"]):not([type="hidden"]),
body .mel-app .mel-customer-new .mel-field select {
  border: 1px solid #9FB9CC !important;
  border-style: solid !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(159,185,204,.12) inset !important;
}
body .mel-app .mel-customer-onboarding .mel-field input:not([type="checkbox"]):not([type="hidden"]):focus,
body .mel-app .mel-customer-onboarding .mel-field select:focus,
body .mel-app .mel-customer-new .mel-field input:not([type="checkbox"]):not([type="hidden"]):focus,
body .mel-app .mel-customer-new .mel-field select:focus {
  border-color: #0C79BA !important;
  box-shadow: 0 0 0 3px rgba(12,121,186,.12) !important;
  outline: 0 !important;
}
body .mel-app .mel-customer-onboarding .mel-field input[readonly] {
  border-color: #C8D5DF !important;
  background: #F4F7F9 !important;
}

/* The completion callout is supporting information, not another page title. */
body .mel-app .mel-customer-onboarding .mel-onboarding-complete h2,
body .mel-app .mel-customer-onboarding .mel-onboarding-complete .elementor-heading-title {
  margin: 4px 0 5px !important;
  font-family: inherit !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #075D4F !important;
}
body .mel-app .mel-customer-onboarding .mel-onboarding-complete p {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

/* Review cards stay compact even when global Elementor heading rules are aggressive. */
body .mel-app .mel-customer-onboarding .mel-review-card .mel-review-card-head h3 {
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
}

/* Lender Customer list actions should read as one deliberate control group. */
body .mel-app .mel-customer-table .mel-status-actions {
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) !important;
  align-items: stretch !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 170px !important;
  max-width: 190px !important;
}
body .mel-app .mel-customer-table .mel-status-actions .mel-status-select {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
}
body .mel-app .mel-customer-table .mel-status-actions .mel-btn-success {
  width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
}
body .mel-app .mel-customer-table .mel-status-actions .mel-save-state:empty {
  display: none !important;
}

/* Normal page used for lender-assisted customer creation. */
body .mel-app .mel-customer-new {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
body .mel-app .mel-customer-new .mel-onboarding-shell {
  padding: 14px;
  border: 1px solid #C5D8E7;
  border-radius: 20px;
  background: #DBE8F5;
}
body .mel-app .mel-customer-new .mel-onboarding-hero {
  padding: 22px 24px;
  border-radius: 12px;
}
body .mel-app .mel-customer-new .mel-onboarding-hero h2 {
  margin: 4px 0 6px !important;
  font-family: "Specter Bold", Sans-serif !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
}
body .mel-app .mel-customer-new .mel-customer-form {
  padding: 20px 8px 6px;
}


/* ======================================================================
 * v0.13.0 - Approved customer affordability actions + customer dashboard
 * ====================================================================== */
body .mel-app .mel-customer-table .mel-app-action-head { width: 128px; text-align:center; }
body .mel-app .mel-customer-row-actions {
  display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:116px;
}
body .mel-app .mel-icon-action {
  display:inline-flex !important; align-items:center; justify-content:center;
  width:32px !important; height:32px !important; min-width:32px !important; min-height:32px !important;
  padding:0 !important; margin:0 !important; border:1px solid #AFC5D5 !important;
  border-radius:10px !important; background:#fff !important; color:#023D69 !important;
  text-decoration:none !important; box-shadow:none !important; cursor:pointer;
}
body .mel-app .mel-icon-action svg { width:16px; height:16px; fill:currentColor; }
body .mel-app .mel-icon-action:hover,
body .mel-app .mel-icon-action:focus { border-color:#0C79BA !important; background:#EFF6FB !important; color:#07527F !important; }
body .mel-app .mel-icon-action.is-affordability { border-color:#8DCEBE !important; color:#08745F !important; background:#F1FAF7 !important; }
body .mel-app .mel-icon-action.is-delete { color:#A3314A !important; border-color:#E7BDC6 !important; background:#FFF8F9 !important; }
body .mel-app .mel-icon-action.is-delete:hover { color:#842238 !important; border-color:#D78B9A !important; background:#FFF1F4 !important; }
body .mel-app .mel-icon-action.is-disabled { opacity:.38; cursor:not-allowed; background:#F5F7F8 !important; color:#7D8A94 !important; }
body .mel-app .mel-credit-score-link { display:inline-flex; flex-direction:column; align-items:flex-start; gap:4px; color:inherit !important; text-decoration:none !important; }
body .mel-app .mel-credit-score-link .mel-score-badge { margin:0 !important; }
body .mel-app .mel-credit-score-link small { font-size:9px; color:#667085; }

body .mel-app .mel-customer-dashboard { width:100%; max-width:1320px; margin:0 auto; }
body .mel-app .mel-customer-dashboard .mel-onboarding-shell { padding:14px; border:1px solid #C5D8E7; border-radius:20px; background:#DBE8F5; }
body .mel-app .mel-customer-approved-badge { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; min-width:120px; }
body .mel-app .mel-customer-approved-badge strong { display:inline-flex; padding:6px 10px; border-radius:999px; background:#E8F8F3; color:#08745F; font-size:12px; }
body .mel-app .mel-customer-approved-badge span { margin-top:5px; color:#667085; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
body .mel-app .mel-customer-next-action { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:12px; padding:22px 24px; border-radius:12px; background:#023D69; color:#fff; }
body .mel-app .mel-customer-next-action .mel-eyebrow { color:#8DE0CF; }
body .mel-app .mel-customer-next-action h3 { margin:4px 0 5px !important; color:#fff !important; font-size:22px !important; line-height:1.2 !important; }
body .mel-app .mel-customer-next-action p { margin:0; color:#D9E7F1; font-size:11px; }
body .mel-app .mel-customer-next-action .mel-btn { white-space:nowrap; background:#fff !important; border-color:#fff !important; color:#023D69 !important; }
body .mel-app .mel-customer-dashboard-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
body .mel-app .mel-customer-dashboard-grid article { min-height:125px; padding:18px; border:1px solid #D1DEE8; border-radius:12px; background:#fff; }
body .mel-app .mel-customer-dashboard-grid article > span { display:block; color:#667085; font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
body .mel-app .mel-customer-dashboard-grid article > strong { display:block; margin:8px 0 4px; color:#023D69; font-size:20px; line-height:1.15; }
body .mel-app .mel-customer-dashboard-grid article > small { display:block; color:#667085; font-size:10px; }
body .mel-app .mel-customer-dashboard-grid article > a { display:inline-block; margin-top:12px; color:#08745F; font-size:10px; font-weight:700; text-decoration:none; }
@media (max-width:1000px){body .mel-app .mel-customer-dashboard-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:680px){body .mel-app .mel-customer-next-action{align-items:flex-start;flex-direction:column;}body .mel-app .mel-customer-dashboard-grid{grid-template-columns:1fr;}}

/* ======================================================================
 * v0.13.1 - Styled credit consent / affordability entry screen
 * ====================================================================== */
body .mel-app .mel-affordability-screen {
  width:100%; max-width:1320px; margin:0 auto;
}
body .mel-app .mel-affordability-shell {
  padding:14px; border:1px solid #C5D8E7; border-radius:20px; background:#DBE8F5;
}
body .mel-app .mel-affordability-hero {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 26px; border:1px solid #D3E0E9; border-radius:12px; background:#fff;
}
body .mel-app .mel-affordability-hero h2 {
  margin:4px 0 6px !important; font-family:"Specter Bold",Sans-serif !important;
  font-size:30px !important; line-height:1.12 !important; font-weight:600 !important; color:#023D69 !important;
}
body .mel-app .mel-affordability-hero p { margin:0; max-width:760px; color:#667085; font-size:11.5px; line-height:1.5; }
body .mel-app .mel-affordability-status {
  display:inline-flex; align-items:center; min-height:30px; padding:6px 11px; border-radius:999px;
  background:#E8F8F3; color:#08745F; font-size:10px; font-weight:750; white-space:nowrap;
}
body .mel-app .mel-affordability-steps {
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin:12px 0;
}
body .mel-app .mel-affordability-steps > div {
  display:flex; align-items:center; gap:9px; min-height:58px; padding:9px 10px;
  border:1px solid #C7D7E3; border-radius:12px; background:rgba(255,255,255,.62); color:#658096;
}
body .mel-app .mel-affordability-steps > div > span {
  display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; flex:0 0 25px;
  border:1px solid #AFC5D5; border-radius:50%; background:#fff; color:#47687F; font-size:10px; font-weight:800;
}
body .mel-app .mel-affordability-steps strong { display:block; color:inherit; font-size:10px; line-height:1.2; }
body .mel-app .mel-affordability-steps small { display:block; margin-top:3px; color:inherit; font-size:8.5px; line-height:1.2; }
body .mel-app .mel-affordability-steps > .is-complete { border-color:#A9DACE; background:#EAF8F4; color:#08745F; }
body .mel-app .mel-affordability-steps > .is-complete > span { border-color:#169D83; background:#169D83; color:#fff; }
body .mel-app .mel-affordability-steps > .is-current { border:2px solid #1683C5; background:#fff; color:#08745F; }
body .mel-app .mel-affordability-customer {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden;
  margin-bottom:12px; border:1px solid #D1DEE8; border-radius:12px; background:#D9E5EE;
}
body .mel-app .mel-affordability-customer > div { padding:13px 15px; background:#fff; }
body .mel-app .mel-affordability-customer span { display:block; margin-bottom:4px; color:#667085; font-size:9px; }
body .mel-app .mel-affordability-customer strong { display:block; color:#023D69; font-size:11px; line-height:1.3; }
body .mel-app .mel-affordability-form-card {
  overflow:hidden; border:1px solid #D1DEE8; border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(2,61,105,.04);
}
body .mel-app .mel-affordability-form-head { padding:20px 24px 16px; border-bottom:1px solid #DDE6ED; }
body .mel-app .mel-affordability-form-head h3 {
  margin:4px 0 5px !important; color:#023D69 !important; font-size:20px !important; line-height:1.2 !important; font-weight:700 !important;
}
body .mel-app .mel-affordability-form-head p { margin:0; color:#667085; font-size:10.5px; }
body .mel-app .mel-affordability-formidable { padding:22px 24px 24px; }

/* Formidable skin scoped to this screen. */
body .mel-app .mel-affordability-formidable .frm_forms,
body .mel-app .mel-affordability-formidable .frm_form_fields,
body .mel-app .mel-affordability-formidable fieldset { margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; }
body .mel-app .mel-affordability-formidable .frm_form_title { display:none !important; }
body .mel-app .mel-affordability-formidable .frm_description { color:#667085 !important; font-size:10px !important; }
body .mel-app .mel-affordability-formidable .frm_section_heading,
body .mel-app .mel-affordability-formidable h3.frm_pos_top,
body .mel-app .mel-affordability-formidable .frm_section_heading h3 {
  margin:2px 0 14px !important; padding:0 0 10px !important; border-bottom:1px solid #E1E8EE !important;
  color:#023D69 !important; font-size:15px !important; line-height:1.25 !important; font-weight:750 !important;
}
body .mel-app .mel-affordability-formidable .frm_form_field { margin-bottom:16px !important; }
body .mel-app .mel-affordability-formidable .frm_primary_label,
body .mel-app .mel-affordability-formidable .frm_form_field > label {
  display:block !important; margin:0 0 7px !important; color:#023D69 !important; font-size:10px !important; line-height:1.3 !important; font-weight:750 !important;
}
body .mel-app .mel-affordability-formidable input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body .mel-app .mel-affordability-formidable select,
body .mel-app .mel-affordability-formidable textarea {
  width:100% !important; min-height:46px !important; padding:10px 13px !important;
  border:1px solid #ADC4D5 !important; border-radius:10px !important; background:#fff !important;
  color:#102F46 !important; font-size:12px !important; line-height:1.35 !important; box-shadow:none !important; outline:none !important;
}
body .mel-app .mel-affordability-formidable input[readonly],
body .mel-app .mel-affordability-formidable input:disabled,
body .mel-app .mel-affordability-formidable select:disabled,
body .mel-app .mel-affordability-formidable textarea:disabled {
  background:#F3F7FA !important; color:#496679 !important;
}
body .mel-app .mel-affordability-formidable input:not([type="checkbox"]):not([type="radio"]):focus,
body .mel-app .mel-affordability-formidable select:focus,
body .mel-app .mel-affordability-formidable textarea:focus {
  border-color:#1683C5 !important; box-shadow:0 0 0 3px rgba(22,131,197,.10) !important;
}
body .mel-app .mel-affordability-formidable .frm_checkbox label,
body .mel-app .mel-affordability-formidable .frm_radio label {
  display:flex !important; align-items:flex-start; gap:8px; color:#38576D !important; font-size:11px !important; line-height:1.45 !important;
}
body .mel-app .mel-affordability-formidable input[type="checkbox"],
body .mel-app .mel-affordability-formidable input[type="radio"] { accent-color:#169D83; }
body .mel-app .mel-affordability-formidable .frm_static_value,
body .mel-app .mel-affordability-formidable .frm_readonly,
body .mel-app .mel-affordability-formidable .frm_plain_text {
  display:block; min-height:46px; padding:12px 13px; border:1px solid #D5E0E8; border-radius:10px;
  background:#F7FAFC; color:#24485F; font-size:11px; line-height:1.4;
}
body .mel-app .mel-affordability-formidable .frm_submit { margin-top:8px !important; padding-top:18px !important; border-top:1px solid #E0E8EE; }
body .mel-app .mel-affordability-formidable .frm_submit button,
body .mel-app .mel-affordability-formidable button[type="submit"],
body .mel-app .mel-affordability-formidable input[type="submit"] {
  min-height:40px !important; padding:10px 18px !important; border:1px solid #023D69 !important; border-radius:999px !important;
  background:#023D69 !important; color:#fff !important; font-size:10px !important; line-height:1 !important; font-weight:750 !important;
  box-shadow:none !important; text-transform:none !important;
}
body .mel-app .mel-affordability-formidable .frm_submit button:hover,
body .mel-app .mel-affordability-formidable .frm_submit button:focus,
body .mel-app .mel-affordability-formidable button[type="submit"]:hover,
body .mel-app .mel-affordability-formidable button[type="submit"]:focus,
body .mel-app .mel-affordability-formidable input[type="submit"]:hover,
body .mel-app .mel-affordability-formidable input[type="submit"]:focus {
  border-color:#07527F !important; background:#07527F !important; color:#fff !important;
}
body .mel-app .mel-affordability-formidable .frm_error,
body .mel-app .mel-affordability-formidable .frm_error_style { border-radius:10px; font-size:10px !important; }
@media (max-width:900px){body .mel-app .mel-affordability-steps{grid-template-columns:repeat(2,minmax(0,1fr));}body .mel-app .mel-affordability-customer{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){body .mel-app .mel-affordability-shell{padding:9px;}body .mel-app .mel-affordability-hero{align-items:flex-start;flex-direction:column;padding:18px;}body .mel-app .mel-affordability-hero h2{font-size:25px !important;}body .mel-app .mel-affordability-steps{grid-template-columns:1fr;}body .mel-app .mel-affordability-customer{grid-template-columns:1fr;}body .mel-app .mel-affordability-form-head,body .mel-app .mel-affordability-formidable{padding:16px;}}

/* ======================================================================
 * v0.13.3 - Consistent list table actions outside the dashboard
 * ====================================================================== */
body .mel-app .mel-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 76px;
}
body .mel-app .mel-app-table .mel-app-action-head {
  width: 118px;
  text-align: center;
}
body .mel-app .mel-app-table td.mel-app-action {
  text-align: right;
  white-space: nowrap;
}
body .mel-app .mel-icon-action.is-edit {
  border-color: #AFC5D5 !important;
  background: #FFFFFF !important;
  color: #023D69 !important;
}
body .mel-app .mel-icon-action.is-edit:hover,
body .mel-app .mel-icon-action.is-edit:focus {
  border-color: #0C79BA !important;
  background: #EFF6FB !important;
  color: #07527F !important;
}
body .mel-app .mel-icon-action.is-approve {
  border-color: #8DCEBE !important;
  background: #F1FAF7 !important;
  color: #08745F !important;
}
body .mel-app .mel-icon-action.is-approve:hover,
body .mel-app .mel-icon-action.is-approve:focus {
  border-color: #169D83 !important;
  background: #E8F8F3 !important;
  color: #066653 !important;
}
body .mel-app .mel-icon-action:disabled,
body .mel-app .mel-icon-action[aria-busy="true"] {
  opacity: .5 !important;
  cursor: wait !important;
}
body .mel-app .mel-lenders-screen .mel-row-actions {
  min-width: 116px;
}
body .mel-app .mel-applications-screen .mel-row-actions {
  min-width: 76px;
}

/* v0.13.4: Persisted completion state for Form 25 rootline steps. */
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete {
    color: #08745F !important;
}
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete > span:first-child,
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete > a:first-child,
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete > button:first-child,
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete .frm_rootline {
    background: #EAF8F4 !important;
    border-color: #169D83 !important;
    color: #08745F !important;
    box-shadow: none !important;
}
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete .frm_rootline_title,
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete [class*="rootline_title"] {
    color: #08745F !important;
    font-weight: 700 !important;
}
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete > span:first-child::after,
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete .frm_rootline::after {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 7px;
    border-radius: 999px;
    background: #169D83;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    vertical-align: middle;
}

/* ======================================================================
 * v0.14.0 - Lender onboarding QA refinements
 * ====================================================================== */
body .mel-app .mel-onboarding-ready {
  padding: 14px 18px !important;
  min-height: 0 !important;
}
body .mel-app .mel-onboarding-ready h3 {
  margin: 3px 0 4px !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
body .mel-app .mel-onboarding-ready p {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}
body .mel-app .mel-inline-option {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  margin: 8px 0 16px !important;
  padding: 11px 13px !important;
  border: 1px solid #BBD9D1 !important;
  border-radius: 10px !important;
  background: #F2FAF8 !important;
  color: #164E45 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}
body .mel-app .mel-inline-option input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  accent-color: #169D83 !important;
}
body .mel-app .mel-field-hidden-by-option {
  display: none !important;
}
body .mel-app .mel-key-person-option {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}
body .mel-app .mel-lender-review-card {
  padding: 18px 20px;
  border: 1px solid #D0DEE8;
  border-radius: 12px;
  background: #fff;
}
body .mel-app .mel-lender-review-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #D8E3EB;
  border-radius: 10px;
  background: #D8E3EB;
}
body .mel-app .mel-lender-review-field {
  padding: 12px 14px;
  background: #fff;
}
body .mel-app .mel-lender-review-field span {
  display: block;
  margin-bottom: 4px;
  color: #6B7D8B;
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .03em;
}
body .mel-app .mel-lender-review-field strong,
body .mel-app .mel-lender-review-field a {
  color: #023D69;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
body .mel-app .mel-lender-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
body .mel-app .mel-review-checklist {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
body .mel-app .mel-review-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #A9D9CF;
  border-radius: 10px;
  background: #EDF9F6;
  color: #08745F;
  font-size: 10px;
  font-weight: 700;
}
body .mel-app .mel-review-check.is-incomplete {
  border-color: #E2D4A2;
  background: #FFF9E8;
  color: #8A6500;
}
@media (max-width: 700px) {
  body .mel-app .mel-lender-review-grid,
  body .mel-app .mel-review-checklist { grid-template-columns: 1fr; }
}

/* ======================================================================
 * v0.15.0 - Application, affordability and loan workflow QA
 * ====================================================================== */
body .mel-app .mel-affordability-customer {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Remove Formidable's trailing rootline connector/border inside the styled application workflow. */
body .mel-app .mel-affordability-formidable.is-application-edit .frm_rootline_group,
body .mel-app .mel-affordability-formidable.is-application-edit [class*="frm_rootline_group"] {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body .mel-app .mel-affordability-formidable.is-application-edit .frm_rootline_group::before,
body .mel-app .mel-affordability-formidable.is-application-edit .frm_rootline_group::after,
body .mel-app .mel-affordability-formidable.is-application-edit [class*="frm_rootline_group"]::before,
body .mel-app .mel-affordability-formidable.is-application-edit [class*="frm_rootline_group"]::after,
body .mel-app .mel-affordability-formidable.is-application-edit .frm_rootline_single:last-child::after,
body .mel-app .mel-affordability-formidable.is-application-edit [class*="frm_rootline_single"]:last-child::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

/* Completed Form 25 number blocks are solid green as well as the labels. */
body .mel-app .mel-affordability-formidable.is-application-edit .mel-step-number-complete,
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete .frm_rootline_number,
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete [class*="rootline_number"],
body .mel-app .mel-affordability-formidable.is-application-edit .mel-affordability-step-complete [class*="rootline_num"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #169D83 !important;
  border-color: #169D83 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
body .mel-app .mel-affordability-formidable.is-application-edit .mel-step-number-complete::after {
  content: "✓" !important;
  color: #FFFFFF !important;
  font-size: .82em !important;
  font-weight: 800 !important;
}
body .mel-app .mel-affordability-formidable.is-application-edit .mel-step-number-complete {
  font-size: 0 !important;
}

body .mel-app .mel-customer-selector-card .mel-app-table-wrap {
  border-top: 1px solid #E0E8EE;
}
body .mel-app .mel-customer-selector-table td,
body .mel-app .mel-customer-selector-table th {
  vertical-align: middle;
}
body .mel-app .mel-customer-selector-table .mel-btn {
  white-space: nowrap;
}

body .mel-app .mel-create-agreement,
body .mel-app .mel-loan-ready-card .mel-btn {
  white-space: nowrap !important;
}
body .mel-app .mel-loan-ready-card {
  margin-bottom: 14px;
}
body .mel-app .mel-loan-ready-list {
  display: grid;
  gap: 8px;
}
body .mel-app .mel-loan-ready-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #D5E2EA;
  border-radius: 10px;
  background: #FFFFFF;
}
body .mel-app .mel-loan-ready-row strong,
body .mel-app .mel-loan-ready-row small {
  display: block;
}
body .mel-app .mel-loan-ready-row strong {
  color: #023D69;
  font-size: 11px;
}
body .mel-app .mel-loan-ready-row small {
  margin-top: 3px;
  color: #667085;
  font-size: 9px;
}

/* Customer review submission state should read as a compact status notice, not another hero. */
body .mel-app .mel-customer-review-submitted h2,
body .mel-app .mel-customer-review-submitted h3 {
  font-size: 20px !important;
  line-height: 1.2 !important;
}

@media (max-width: 700px) {
  body .mel-app .mel-loan-ready-row {
    align-items: flex-start;
    flex-direction: column;
  }
}
body .mel-app .mel-review-submitted {
  align-items: center;
  gap: 12px;
}
body .mel-app .mel-review-submitted strong {
  font-size: 15px !important;
  line-height: 1.25 !important;
}
body .mel-app .mel-review-submitted span {
  font-size: 10.5px !important;
  line-height: 1.45 !important;
}
\n\n/* ======================================================================\n * v0.15.1 - Loan agreement action consistency\n * Create Agreement is a primary forward workflow action, not an approval.\n * Keep it aligned with the compact navy actions used across Melatec.\n * ====================================================================== */\nbody .mel-app a.mel-create-agreement,\nbody .mel-app button.mel-create-agreement {\n  min-height: 32px !important;\n  height: 32px !important;\n  padding: 0 14px !important;\n  border: 1px solid #023D69 !important;\n  border-radius: 999px !important;\n  background: #023D69 !important;\n  color: #FFFFFF !important;\n  font-size: 10px !important;\n  font-weight: 700 !important;\n  line-height: 1 !important;\n  box-shadow: none !important;\n  white-space: nowrap !important;\n}\nbody .mel-app a.mel-create-agreement:hover,\nbody .mel-app a.mel-create-agreement:focus,\nbody .mel-app button.mel-create-agreement:hover,\nbody .mel-app button.mel-create-agreement:focus {\n  border-color: #07527F !important;\n  background: #07527F !important;\n  color: #FFFFFF !important;\n}\n
/* v0.16.0 loan agreement / quotation Views */
.melatec-portal-ui .loan-contract {
    max-width: 1120px;
    margin: 0 auto;
    color: #023d69;
    font-size: 14px;
    line-height: 1.6;
}
.melatec-portal-ui .loan-contract > h2 {
    margin: 0 0 8px;
    font-family: "Specter Bold", Sans-serif;
    font-size: 30px;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    color: #023d69;
}
.melatec-portal-ui .loan-contract > h3 {
    margin: 28px 0 18px;
    padding: 9px 16px;
    border-left: 4px solid #023d69;
    background: #1688c4;
    color: #062f50;
    font-size: 18px;
    line-height: 1.25;
}
.melatec-portal-ui .loan-contract h4 {
    margin: 26px 0 12px;
    font-size: 19px;
    line-height: 1.3;
    color: #023d69;
}
.melatec-portal-ui .loan-contract table {
    width: 100%;
    margin: 12px 0 22px;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}
.melatec-portal-ui .loan-contract table th,
.melatec-portal-ui .loan-contract table td {
    padding: 10px 12px;
    border: 1px solid #6f96b3;
    vertical-align: top;
    overflow-wrap: anywhere;
}
.melatec-portal-ui .loan-contract table th {
    background: #edf4f8;
    color: #023d69;
    font-weight: 700;
    text-align: left;
}
.melatec-portal-ui .loan-contract .contract-total-row th,
.melatec-portal-ui .loan-contract .contract-total-row td {
    background: #e9f8f4;
    font-weight: 700;
}
.melatec-portal-ui .loan-contract .contract-signature-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin: 14px 0 22px;
}
.melatec-portal-ui .loan-contract .contract-signature-card {
    padding: 18px;
    border: 1px solid #b7cede;
    border-radius: 12px;
    background: #f8fbfd;
}
.melatec-portal-ui .loan-contract .contract-signature-card strong {
    display: block;
    margin-bottom: 4px;
    color: #023d69;
}
.melatec-portal-ui .loan-contract .contract-signature-status {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #fff4d8;
    color: #8a6300;
    font-size: 12px;
    font-weight: 700;
}
.melatec-portal-ui .loan-contract .contract-note {
    padding: 12px 14px;
    border-radius: 10px;
    background: #edf7f4;
    color: #0a6b5c;
}
@media (max-width: 767px) {
    .melatec-portal-ui .loan-contract > h2 { font-size: 24px; }
    .melatec-portal-ui .loan-contract table { table-layout: auto; }
    .melatec-portal-ui .loan-contract .contract-signature-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
 * v0.16.1 - New application selection and XDS hand-off
 * ====================================================================== */
body .mel-app .mel-new-application-panel {
  padding: 0 !important;
  overflow: hidden;
}
body .mel-app .mel-new-application-panel > .mel-applications-topbar {
  margin: 0 !important;
  padding: 12px 14px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #C9DCE8 !important;
}
body .mel-app .mel-new-application-panel .mel-applications-sections {
  gap: 0 !important;
}
body .mel-app .mel-new-application-panel .mel-applications-sections span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 7px 13px !important;
  border: 1px solid #BFD5E3 !important;
  border-radius: 999px !important;
  background: #E8F6F2 !important;
  color: #087A68 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
body .mel-app .mel-new-application-panel .mel-applications-sections span::after {
  display: none !important;
}
body .mel-app .mel-new-application-panel .mel-applications-actions .mel-btn {
  min-height: 32px !important;
  padding: 8px 14px !important;
  font-size: 10px !important;
}
body .mel-app .mel-new-application-intro {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 16px 14px 14px !important;
  background: #EDF5FA !important;
  border-bottom: 1px solid #C9DCE8 !important;
}
body .mel-app .mel-new-application-intro .mel-eyebrow {
  display: block !important;
  margin-bottom: 4px !important;
  color: #169D83 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}
body .mel-app .mel-new-application-intro h2 {
  margin: 0 0 3px !important;
  color: #023D69 !important;
  font-family: "Specter Bold", Sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}
body .mel-app .mel-new-application-intro p {
  margin: 0 !important;
  color: #60768A !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}
body .mel-app .mel-new-application-panel > .mel-app-table-meta {
  padding: 7px 14px !important;
  background: #EDF5FA !important;
  border-bottom: 1px solid #C9DCE8 !important;
}
body .mel-app .mel-new-application-panel > .mel-app-table-wrap {
  margin: 0 12px 12px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
}
body .mel-app .mel-new-application-panel .mel-customer-selector-table .mel-selector-start {
  min-width: 112px !important;
  min-height: 32px !important;
  justify-content: center !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  background: #023D69 !important;
  border-color: #023D69 !important;
  color: #FFFFFF !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}
body .mel-app .mel-new-application-panel .mel-customer-selector-table .mel-selector-start:hover,
body .mel-app .mel-new-application-panel .mel-customer-selector-table .mel-selector-start:focus {
  background: #169D83 !important;
  border-color: #169D83 !important;
  color: #FFFFFF !important;
}
body .mel-app .mel-new-application-empty {
  margin: 12px !important;
  padding: 28px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
}
body .mel-app .mel-inline-alert {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: -4px -4px 14px !important;
  padding: 10px 12px !important;
  border: 1px solid #E4C36D !important;
  border-radius: 10px !important;
  background: #FFF9E8 !important;
  color: #725600 !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}
body .mel-app .mel-inline-alert strong {
  color: #725600 !important;
  white-space: nowrap !important;
}
@media (max-width: 760px) {
  body .mel-app .mel-new-application-intro {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  body .mel-app .mel-new-application-panel > .mel-app-table-wrap {
    overflow-x: auto !important;
  }
}

/* ======================================================================
 * v0.18.0 - DebiCheck, collections and lender settlement ledger
 * ====================================================================== */

/* The mandate setup form is a business workflow screen. Technical CPS/file
 * generation values remain in Form 23 for the existing Nedbank integration,
 * but are not editable in the portal UI. They are surfaced read-only on the
 * DebiCheck operational screen instead. */
.melatec-portal-ui #frm_field_1227_container,
.melatec-portal-ui #frm_field_1211_container,
.melatec-portal-ui #frm_field_1212_container,
.melatec-portal-ui #frm_field_1213_container,
.melatec-portal-ui #frm_field_1214_container,
.melatec-portal-ui #frm_field_1215_container,
.melatec-portal-ui #frm_field_1216_container,
.melatec-portal-ui #frm_field_1217_container,
.melatec-portal-ui #frm_field_1218_container,
.melatec-portal-ui #frm_field_1219_container,
.melatec-portal-ui #frm_field_1220_container,
.melatec-portal-ui #frm_field_1228_container,
.melatec-portal-ui #frm_field_1237_container,
.melatec-portal-ui #frm_field_1239_container,
.melatec-portal-ui #frm_field_1240_container,
.melatec-portal-ui #frm_field_1241_container,
.melatec-portal-ui #frm_field_1242_container,
.melatec-portal-ui #frm_field_1243_container,
.melatec-portal-ui #frm_field_1244_container,
.melatec-portal-ui #frm_field_1245_container,
.melatec-portal-ui #frm_field_1246_container,
.melatec-portal-ui #frm_field_1247_container,
.melatec-portal-ui #frm_field_1248_container,
.melatec-portal-ui #frm_field_1249_container,
.melatec-portal-ui #frm_field_1250_container,
.melatec-portal-ui #frm_field_1251_container,
.melatec-portal-ui #frm_field_1252_container,
.melatec-portal-ui #frm_field_1253_container,
.melatec-portal-ui #frm_field_1254_container,
.melatec-portal-ui #frm_field_1238_container {
  display: none !important;
}

.mel-loans-panel,
.mel-mandates-panel,
.mel-payments-panel {
  border: 1px solid var(--mel-ui-border) !important;
  border-radius: var(--mel-ui-radius-outer) !important;
  background: var(--mel-ui-panel) !important;
  overflow: hidden;
}

.mel-loans-panel .mel-app-table-wrap,
.mel-mandates-panel .mel-app-table-wrap,
.mel-payments-panel .mel-app-table-wrap {
  margin: 0 14px 14px !important;
}

.mel-finance-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 14px;
  padding: 11px 2px 8px;
  border-top: 1px solid #cbd9e3;
}
.mel-finance-section-head:first-of-type { border-top: 0; }
.mel-finance-section-head > div { min-width: 0; }
.mel-finance-section-head .mel-eyebrow { display: block; margin-bottom: 2px; }
.mel-finance-section-head strong {
  display: block;
  color: #023d69;
  font-size: 12px;
  line-height: 1.3;
}
.mel-finance-section-head > span {
  min-width: 26px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff;
  color: #587389;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.mel-finance-kpis,
.mel-finance-summary-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  padding: 12px 14px;
}
.mel-finance-metric {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #d3e0e8;
  border-radius: 12px;
  background: #fff;
}
.mel-finance-metric span,
.mel-finance-metric strong,
.mel-finance-metric small { display: block; }
.mel-finance-metric span {
  margin-bottom: 5px;
  color: #5e7789;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mel-finance-metric strong {
  color: #023d69;
  font-size: 18px;
  line-height: 1.15;
}
.mel-finance-metric small {
  margin-top: 4px;
  color: #73899a;
  font-size: 8px;
  line-height: 1.35;
}

.mel-inline-finance-form {
  display: grid;
  grid-template-columns: minmax(92px,1fr) minmax(100px,1.1fr) 112px 32px;
  align-items: center;
  gap: 5px;
  min-width: 360px;
}
.mel-inline-finance-form select,
.mel-inline-finance-form input,
.mel-payout-form input {
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 1px solid #b9ccd9 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #244b65 !important;
  font-size: 9px !important;
  box-shadow: none !important;
}
.mel-inline-finance-form .mel-icon-action { margin: 0 !important; }

.mel-payout-form {
  display: grid;
  grid-template-columns: 92px 116px minmax(120px,1fr) auto;
  gap: 5px;
  align-items: center;
  min-width: 455px;
}
.mel-payout-form .mel-btn { min-height: 30px !important; height: 30px !important; }
.mel-settlement-balance { color: #169d83 !important; }

.mel-finance-detail {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--mel-ui-border);
  border-radius: var(--mel-ui-radius-outer);
  background: var(--mel-ui-panel);
}
.mel-finance-detail .mel-back-link {
  display: inline-block;
  margin: 0 0 10px 2px;
  color: #0b7e70;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}
.mel-finance-detail .mel-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #d3e0e8;
  border-radius: 12px;
  background: #fff;
}
.mel-finance-detail .mel-workspace-header h2 {
  margin: 2px 0 3px !important;
  color: #023d69 !important;
  font-size: 25px !important;
  line-height: 1.1 !important;
}
.mel-finance-detail .mel-workspace-header p { margin: 0; color: #6c8191; font-size: 9px; }
.mel-finance-detail .mel-finance-summary-grid { padding-left: 0; padding-right: 0; }
.mel-finance-detail-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.mel-finance-detail-grid .mel-workspace-card {
  padding: 16px;
  border: 1px solid #d3e0e8;
  border-radius: 12px;
  background: #fff;
}
.mel-finance-detail-grid h3 {
  margin: 3px 0 10px !important;
  color: #023d69 !important;
  font-size: 16px !important;
}
.mel-finance-detail-grid p { color: #667f91; font-size: 9.5px; }
.mel-finance-status-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #edf1f4;
}
.mel-finance-status-list > div:last-child { border-bottom: 0; }
.mel-finance-status-list span { color: #6c8191; font-size: 9px; }
.mel-finance-status-list strong { color: #023d69; font-size: 9.5px; }

.mel-mandates-panel .mel-applications-actions .mel-muted-value {
  max-width: 320px;
  text-align: right;
}

@media (max-width: 1050px) {
  .mel-finance-kpis,
  .mel-finance-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mel-finance-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .mel-finance-kpis,
  .mel-finance-summary-grid { grid-template-columns: 1fr; }
  .mel-inline-finance-form,
  .mel-payout-form { min-width: 0; grid-template-columns: 1fr; }
}

/* ======================================================================
 * v0.18.0 - role journeys, quick actions and manual finance capture
 * ====================================================================== */
body .mel-app .mel-dashboard-quick-actions {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
body .mel-app .mel-dashboard-quick-actions > a {
  display: flex !important;
  min-width: 0 !important;
  min-height: 58px !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 10px 12px !important;
  border: 1px solid #D2E1EA !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(2,61,105,.035) !important;
  text-decoration: none !important;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
body .mel-app .mel-dashboard-quick-actions > a:hover,
body .mel-app .mel-dashboard-quick-actions > a:focus {
  border-color: #169D83 !important;
  box-shadow: 0 6px 16px rgba(2,61,105,.08) !important;
  transform: translateY(-1px) !important;
}
body .mel-app .mel-dashboard-quick-actions > a span {
  color: #169D83 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
body .mel-app .mel-dashboard-quick-actions > a strong {
  color: #023D69 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

/* Keep the dashboard rows on one exact four-column grid. */
body .mel-app .mel-dashboard-quick-actions,
body .mel-app .mel-dashboard-kpi-grid {
  width: 100% !important;
  box-sizing: border-box !important;
}

body .mel-app .mel-row-primary-action,
body .mel-app .mel-workspace-next-button {
  min-height: 31px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body .mel-app .mel-row-actions {
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
body .mel-app .mel-loan-empty .mel-btn {
  margin-top: 8px !important;
}

body .mel-app .mel-finance-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 10px !important;
  padding: 0 14px 12px !important;
}
body .mel-app .mel-finance-quick-card {
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid #D1E0E9 !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: 0 3px 12px rgba(2,61,105,.04) !important;
}
body .mel-app .mel-finance-quick-head {
  margin-bottom: 10px !important;
  padding-bottom: 9px !important;
  border-bottom: 1px solid #E8EFF3 !important;
}
body .mel-app .mel-finance-quick-head h3 {
  margin: 2px 0 3px !important;
  color: #023D69 !important;
  font-family: "Specter Bold", Sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
}
body .mel-app .mel-finance-quick-head p {
  max-width: 600px !important;
  margin: 0 !important;
  color: #667F91 !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
}
body .mel-app .mel-finance-capture-form {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 8px 9px !important;
}
body .mel-app .mel-finance-capture-form label {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
}
body .mel-app .mel-finance-capture-form label.is-wide {
  grid-column: 1 / -1 !important;
}
body .mel-app .mel-finance-capture-form label > span {
  display: block !important;
  margin: 0 0 4px !important;
  color: #164B6B !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}
body .mel-app .mel-finance-capture-form select,
body .mel-app .mel-finance-capture-form input {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 1px solid #AFC6D6 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #183F59 !important;
  font-size: 9.5px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}
body .mel-app .mel-finance-capture-form select:focus,
body .mel-app .mel-finance-capture-form input:focus {
  border-color: #0B83C8 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(11,131,200,.10) !important;
}
body .mel-app .mel-finance-capture-actions {
  display: flex !important;
  grid-column: 1 / -1 !important;
  justify-content: flex-end !important;
  padding-top: 2px !important;
}
body .mel-app .mel-finance-capture-actions .mel-btn {
  min-height: 32px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
}
body .mel-app .mel-finance-filterrow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 14px 8px !important;
  padding: 8px 10px !important;
  border: 1px solid #D4E2EA !important;
  border-radius: 10px !important;
  background: #EEF5F9 !important;
}
body .mel-app .mel-finance-filterrow .mel-app-search {
  margin-left: auto !important;
}

body .mel-app .mel-inline-alert.is-success {
  border-color: #A9DACE !important;
  background: #ECF9F5 !important;
  color: #096A5D !important;
}
body .mel-app .mel-inline-alert.is-success strong {
  color: #096A5D !important;
}

body .mel-app .mel-mandate-next {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
body .mel-app .mel-mandate-next .mel-btn {
  margin-top: 4px !important;
}
body .mel-app .mel-mandate-collection-count {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid #EDF1F4 !important;
}
body .mel-app .mel-mandate-collection-count strong {
  color: #169D83 !important;
  font-size: 20px !important;
}
body .mel-app .mel-mandate-collection-count span {
  color: #6C8191 !important;
  font-size: 9px !important;
}

@media (max-width: 1050px) {
  body .mel-app .mel-dashboard-quick-actions {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  body .mel-app .mel-finance-quick-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 700px) {
  body .mel-app .mel-dashboard-quick-actions {
    grid-template-columns: 1fr !important;
  }
  body .mel-app .mel-finance-capture-form {
    grid-template-columns: 1fr !important;
  }
  body .mel-app .mel-finance-capture-form label.is-wide,
  body .mel-app .mel-finance-capture-actions {
    grid-column: 1 !important;
  }
  body .mel-app .mel-finance-filterrow {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}
body .mel-app .mel-loan-next-action {
  margin: 0 14px 12px !important;
  padding: 14px !important;
  border: 1px solid #CFE0E8 !important;
  border-radius: 12px !important;
  background: #F5FAFC !important;
}
body .mel-app .mel-loan-next-action h3 {
  margin: 2px 0 4px !important;
  color: #023D69 !important;
  font-family: "Specter Bold", Sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
body .mel-app .mel-loan-next-action p {
  margin: 0 0 9px !important;
  color: #667F91 !important;
  font-size: 9.5px !important;
  line-height: 1.45 !important;
}

/* ======================================================================
 * v0.18.2 - Customer profile submitted confirmation spacing
 * ====================================================================== */
body .mel-app .mel-review-submitted {
  margin: 18px 0 !important;
  padding: 20px 22px !important;
}
body .mel-app .mel-review-submitted strong {
  display: block;
  margin: 0 0 4px !important;
}
body .mel-app .mel-review-submitted span {
  display: block;
  margin: 0 0 14px !important;
}
body .mel-app .mel-review-submitted .mel-btn {
  margin-top: 6px !important;
}


/* ======================================================================
 * v0.18.3 - Loan agreement alignment and legacy Elementor fallback UI
 * ====================================================================== */
/* Keep both legal agreement views on the same horizontal grid as the
 * Formidable fields/signature sections that follow them. */
.melatec-portal-ui #frm_field_1272_container,
.melatec-portal-ui #frm_field_1273_container {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.melatec-portal-ui #frm_field_1272_container .loan-contract,
.melatec-portal-ui #frm_field_1273_container .loan-contract,
.melatec-portal-ui .loan-contract {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.melatec-portal-ui #form_debitordermandatesetup,
.melatec-portal-ui #form_debitordermandatesetup .frm_form_fields,
.melatec-portal-ui #form_debitordermandatesetup .frm_fields_container {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
/* Elementor shortcode/form widgets occasionally add their own inner width.
 * Normalise it on the two agreement/mandate routes only. */
body.melatec-portal-ui #form_debitordermandatesetup .frm_form_field,
body.melatec-portal-ui #form_debitordermandatesetup .frm_section_heading {
  box-sizing: border-box !important;
}
body.melatec-portal-ui #form_debitordermandatesetup .loan-contract table {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ======================================================================
 * v0.18.4 - Typography consistency and readability
 * ====================================================================== */
/* Use one inherited portal typeface for controls and tabular data so native
 * browser input/select fonts do not visually clash with the surrounding UI. */
body .mel-app,
body .mel-app input,
body .mel-app select,
body .mel-app textarea,
body .mel-app button,
body .mel-app table,
body .mel-app th,
body .mel-app td {
  font-family: inherit !important;
}

/* Slightly increase the base operational UI size without changing the large
 * page and card headings. */
body .mel-app {
  font-size: 11px !important;
}
body .mel-app .mel-eyebrow {
  font-size: 9.5px !important;
}
body .mel-app .mel-muted-value,
body .mel-app .mel-workspace-header p,
body .mel-app .mel-finance-detail-grid p,
body .mel-app .mel-finance-status-list span,
body .mel-app .mel-finance-status-list strong {
  font-size: 10px !important;
  line-height: 1.4 !important;
}
body .mel-app .mel-pill {
  font-size: 9.5px !important;
}
body .mel-app .mel-btn,
body .mel-app .mel-btn-small,
body .mel-app .mel-row-primary-action,
body .mel-app .mel-workspace-next-button,
body .mel-app .mel-finance-capture-actions .mel-btn {
  font-size: 10px !important;
}

/* Primary application/payment tables share one scale and one font weight. */
body .mel-app .mel-app-table,
body .mel-app .mel-app-table thead,
body .mel-app .mel-app-table tbody,
body .mel-app .mel-app-table tr,
body .mel-app .mel-app-table th,
body .mel-app .mel-app-table td,
body .mel-app .mel-app-table strong,
body .mel-app .mel-app-table small,
body .mel-app .mel-app-table input,
body .mel-app .mel-app-table select,
body .mel-app .mel-app-table button {
  font-family: inherit !important;
}
body .mel-app .mel-app-table {
  font-size: 11.5px !important;
}
body .mel-app .mel-app-table thead th {
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}
body .mel-app .mel-app-table tbody td {
  font-size: 11px !important;
  line-height: 1.32 !important;
}
body .mel-app .mel-app-table td strong,
body .mel-app .mel-app-reference {
  font-size: 11px !important;
  line-height: 1.3 !important;
}
body .mel-app .mel-app-table td small {
  font-size: 9.25px !important;
  line-height: 1.3 !important;
}
body .mel-app .mel-app-table .mel-risk-label {
  font-size: 10.5px !important;
}
body .mel-app .mel-app-table .mel-score-badge,
body .mel-app .mel-app-table .mel-pill {
  font-size: 9.5px !important;
}
body .mel-app .mel-app-table .mel-status-select {
  font-family: inherit !important;
  font-size: 10.5px !important;
}

/* Inline collection editor must visually belong to the table row. */
body .mel-app .mel-app-table .mel-inline-finance-form {
  font-size: 10.5px !important;
}
body .mel-app .mel-app-table .mel-inline-finance-form select,
body .mel-app .mel-app-table .mel-inline-finance-form input {
  height: 32px !important;
  min-height: 32px !important;
  padding: 5px 8px !important;
  font-family: inherit !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
body .mel-app .mel-app-table .mel-inline-finance-form .mel-icon-action {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

/* Payment screen supporting copy and capture controls. */
body .mel-app .mel-finance-section-head strong {
  font-size: 13px !important;
}
body .mel-app .mel-finance-section-head > span {
  font-size: 10px !important;
}
body .mel-app .mel-finance-metric span,
body .mel-app .mel-finance-metric small {
  font-size: 9.5px !important;
}
body .mel-app .mel-finance-metric strong {
  font-size: 19px !important;
}
body .mel-app .mel-finance-quick-head h3 {
  font-size: 17px !important;
}
body .mel-app .mel-finance-quick-head p {
  font-size: 10px !important;
}
body .mel-app .mel-finance-capture-form label > span {
  font-size: 9.5px !important;
}
body .mel-app .mel-finance-capture-form select,
body .mel-app .mel-finance-capture-form input {
  font-family: inherit !important;
  font-size: 10.5px !important;
}
body .mel-app .mel-finance-filterrow .mel-filter,
body .mel-app .mel-app-status-tabs .mel-filter {
  font-size: 10px !important;
}
body .mel-app .mel-finance-filterrow .mel-filter span,
body .mel-app .mel-app-status-tabs .mel-filter span {
  font-size: 9px !important;
}
body .mel-app .mel-app-search input,
body .mel-app .mel-finance-filterrow .mel-app-search input {
  font-family: inherit !important;
  font-size: 10.5px !important;
}