/* =========================================================
   CUSTOMER DIRECTORY
========================================================= */

.customer-directory-header {
  margin-bottom: 18px;
}

.customer-directory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.customer-directory-search {
  position: relative;
  width: min(520px, 100%);
}

.customer-directory-search i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #7b8882;
  pointer-events: none;
}

.customer-directory-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 42px 10px 14px;
  border: 1px solid #dce4df;
  border-radius: 12px;
  background: #fff;
  font: inherit;
}

.customer-directory-count {
  color: #718078;
  font-size: 13px;
}

.customer-directory-message {
  margin-bottom: 10px;
  color: #a13c36;
  font-size: 13px;
}

.customer-directory-message:empty {
  display: none;
}

.customer-directory-card {
  overflow: hidden;
}

.customer-directory-table {
  width: 100%;
  border-collapse: collapse;
}

.customer-directory-table th,
.customer-directory-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #edf1ee;
  text-align: right;
  vertical-align: middle;
}

.customer-directory-table th {
  color: #69766f;
  font-size: 12px;
  background: #fafcfb;
}

.customer-directory-status {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  color: #176043;
  background: #eaf6ef;
  font-size: 11px;
  font-weight: 700;
}


/* =========================================================
   CUSTOMER 360 MODAL
========================================================= */

.customer-360-overlay {
  z-index: 1200;
}

.customer-360-modal {
  width: min(1180px, calc(100vw - 48px));
  max-width: 1180px;
  max-height: calc(100vh - 70px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.customer-360-header {
  flex: 0 0 auto;
}

.customer-360-header-main {
  display: grid;
  gap: 6px;
}

.customer-360-header-main h2 {
  margin: 0;
}

.customer-360-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-360-contact-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.customer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1b6046;
  text-decoration: none;
  font-weight: 700;
}

.customer-contact-link:hover {
  text-decoration: underline;
}

.customer-contact-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d9e3dd;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #345449;
  text-decoration: none;
  cursor: pointer;
}

.customer-contact-icon:hover:not(:disabled) {
  border-color: #9cc8ae;
  background: #f1faf4;
}

.customer-contact-icon:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.customer-contact-whatsapp {
  color: #168c4b;
}

.customer-contact-muted {
  color: #8a9690;
  font-size: 13px;
}


/* =========================================================
   TABS
========================================================= */

.customer-360-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 12px 24px;
  overflow-x: auto;
  border-bottom: 1px solid #e5ebe7;
  background: #fff;
}

.customer-360-tabs button {
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  background: transparent;
  color: #596860;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.customer-360-tabs button.active {
  background: #eaf6ef;
  color: #176043;
  font-weight: 800;
}


/* =========================================================
   CONTENT
========================================================= */

.customer-360-content {
  overflow: auto;
  padding: 18px 24px 24px;
  background: #f8faf9;
}

.customer-360-panel.hidden {
  display: none;
}

.customer-360-kpis {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.customer-360-kpi,
.customer-360-card {
  background: #fff;
  border: 1px solid #e1e8e4;
  border-radius: 14px;
}

.customer-360-kpi {
  padding: 15px;
}

.customer-360-kpi span {
  display: block;
  color: #748078;
  font-size: 12px;
}

.customer-360-kpi strong {
  display: block;
  margin-top: 5px;
  font-size: 25px;
}

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

.customer-360-card {
  padding: 18px;
}

.customer-360-card h3 {
  margin: 0 0 14px;
}

.customer-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.customer-card-title h3 {
  margin: 0;
}

.customer-360-details {
  margin: 0;
}

.customer-360-details > div {
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #edf1ee;
}

.customer-360-details dt {
  color: #77837e;
}

.customer-360-details dd {
  margin: 0;
  font-weight: 600;
}

.customer-360-list-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #edf1ee;
}

.customer-360-list-row div {
  display: grid;
  gap: 3px;
}

.customer-360-list-row span,
.customer-360-empty {
  color: #77837e;
  font-size: 13px;
}


/* =========================================================
   EDIT PROFILE
========================================================= */

.customer-360-edit-panel {
  flex: 0 0 auto;
  padding: 18px 24px;
  border-bottom: 1px solid #e3e9e5;
  background: #f7faf8;
}

.customer-360-edit-panel.hidden {
  display: none;
}

.customer-edit-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}

.customer-edit-heading h3 {
  margin: 4px 0 0;
}

.customer-edit-form {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.customer-edit-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: #53635b;
}

.customer-edit-form input,
.customer-edit-form select,
.customer-edit-form textarea {
  width: 100%;
  border: 1px solid #dce5df;
  border-radius: 10px;
  background: #fff;
  padding: 10px 11px;
  font: inherit;
}

.customer-edit-wide {
  grid-column: 1 / -1;
}

.customer-edit-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.customer-edit-message {
  grid-column: 1 / -1;
  margin: 0;
  color: #a13c36;
  font-size: 12px;
}

.customer-edit-message:empty {
  display: none;
}

.customer-360-loading-card {
  padding: 30px;
  text-align: center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .customer-360-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .customer-360-header {
    align-items: flex-start;
  }

  .customer-360-header-actions {
    flex-wrap: wrap;
  }

  .customer-360-kpis {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .customer-360-grid {
    grid-template-columns: 1fr;
  }

  .customer-edit-form {
    grid-template-columns: 1fr;
  }

  .customer-edit-wide,
  .customer-edit-actions,
  .customer-edit-message {
    grid-column: auto;
  }
}


@media (max-width: 640px) {

  .customer-360-modal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .customer-360-tabs {
    padding-inline: 14px;
  }

  .customer-360-content,
  .customer-360-edit-panel {
    padding-inline: 14px;
  }

  .customer-360-kpis {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .customer-360-details > div {
    grid-template-columns: 90px 1fr;
  }

  .customer-directory-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .customer-directory-card {
    overflow-x: auto;
  }

  .customer-directory-table {
    min-width: 760px;
  }
}


/* =========================================================
   CUSTOMER 360 STABLE MODAL LAYOUT V2
========================================================= */

.customer-360-modal {
  height: min(
    780px,
    calc(100vh - 70px)
  );

  min-height: min(
    680px,
    calc(100vh - 70px)
  );

  display: flex;
  flex-direction: column;
}


/*
 * Header and tabs remain stationary.
 */
.customer-360-header,
.customer-360-tabs {
  flex: 0 0 auto;
}


/*
 * Main customer content is the only normal tab scroll area.
 */
.customer-360-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}


/*
 * Keep empty tabs visually stable rather than collapsing.
 */
.customer-360-panel {
  min-height: 430px;
}

.customer-360-panel.hidden {
  display: none;
}


/* =========================================================
   EDIT MODE
========================================================= */

/*
 * Edit section occupies the available body area instead of
 * increasing modal height beyond the viewport.
 */
.customer-360-edit-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 88px;
}


/*
 * When visible, editing behaves like a proper modal workspace.
 */
.customer-360-edit-panel:not(.hidden) {
  display: block;
}


/*
 * Keep form actions accessible even on shorter screens.
 */
.customer-edit-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;

  margin:
    16px -24px -88px;

  padding:
    14px 24px;

  background:
    rgba(255, 255, 255, 0.97);

  border-top:
    1px solid #e1e8e4;

  box-shadow:
    0 -8px 18px
    rgba(23, 45, 36, 0.05);
}


/*
 * Editing should not leave the normal tab body competing
 * for vertical space.
 */
.customer-360-modal.is-editing
.customer-360-tabs,

.customer-360-modal.is-editing
.customer-360-content {
  display: none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .customer-360-modal {
    height:
      calc(100vh - 20px);

    min-height:
      calc(100vh - 20px);
  }

  .customer-360-panel {
    min-height: 420px;
  }

}


@media (max-width: 640px) {

  .customer-360-modal {
    height: 100vh;
    min-height: 100vh;
  }

  .customer-360-panel {
    min-height:
      calc(100vh - 250px);
  }

  .customer-edit-actions {
    margin:
      16px -14px -88px;

    padding:
      12px 14px;
  }

}


/* =========================================================
   CUSTOMER EDIT WORKSPACE V3
   Proper fixed heading + scrollable form + contained footer
========================================================= */

.customer-360-modal.is-editing
.customer-360-edit-panel {
  display: flex;
  flex-direction: column;

  flex: 1 1 auto;
  min-height: 0;

  padding: 0;
  overflow: hidden;
}


.customer-360-modal.is-editing
.customer-edit-heading {
  flex: 0 0 auto;

  margin: 0;
  padding: 18px 24px;

  border-bottom: 1px solid #e1e8e4;
  background: #f7faf8;
}


.customer-360-modal.is-editing
.customer-edit-form {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 20px 24px 14px;
}


/*
 * Undo the previous floating / negative-margin footer.
 *
 * It remains sticky inside the edit form but now occupies its
 * own logical space and never overlaps inputs.
 */
.customer-360-modal.is-editing
.customer-edit-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;

  margin: 18px 0 0;
  padding: 14px 0 4px;

  background: #f7faf8;

  border-top: 1px solid #dfe7e2;

  box-shadow:
    0 -8px 18px
    rgba(23, 45, 36, 0.035);
}


@media (max-width: 640px) {

  .customer-360-modal.is-editing
  .customer-edit-heading {
    padding-inline: 14px;
  }

  .customer-360-modal.is-editing
  .customer-edit-form {
    padding-inline: 14px;
  }

  .customer-360-modal.is-editing
  .customer-edit-actions {
    margin-inline: 0;
    padding-inline: 0;
  }

}


/* =========================================================
   CUSTOMER DIRECTORY INTERACTION V2
========================================================= */

.customer-directory-name-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;

  color: #176043;

  font: inherit;
  font-weight: 800;

  cursor: pointer;
  text-align: right;
}

.customer-directory-name-link:hover {
  text-decoration: underline;
}


.customer-directory-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


.customer-directory-contact-button {
  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #dce5df;
  border-radius: 9px;

  background: #fff;
  color: #35574a;

  text-decoration: none;
  cursor: pointer;
}


.customer-directory-contact-button:hover:not(:disabled) {
  background: #f1faf4;
  border-color: #9cc8ae;
}


.customer-directory-contact-wa {
  color: #168c4b;
}


.customer-directory-contact-button:disabled {
  opacity: .35;
  cursor: not-allowed;
}


/* =========================================================
   CUSTOMER 360 REAL DATA TABS
========================================================= */

.customer-assets-grid {
  display: grid;
  gap: 14px;
}

.customer-site-card {
  padding: 0;
  overflow: hidden;
}

.customer-site-heading,
.customer-tab-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.customer-site-heading {
  padding: 18px;
  border-bottom: 1px solid #edf1ee;
}

.customer-site-heading h3,
.customer-tab-heading h3 {
  margin: 5px 0 0;
}

.customer-site-heading p {
  margin: 6px 0 0;
  color: #728078;
  font-size: 13px;
}

.customer-site-count {
  color: #176043;
  white-space: nowrap;
}

.customer-tab-heading {
  align-items: center;
  margin-bottom: 16px;
}

.customer-assets-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.customer-assets-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
}

.customer-assets-table th,
.customer-assets-table td {
  padding: 13px 12px;
  border-bottom: 1px solid #edf1ee;
  text-align: right;
  vertical-align: middle;
}

.customer-assets-table th {
  color: #6f7d75;
  background: #fafcfb;
  font-size: 12px;
}

.customer-assets-table tbody tr:last-child td {
  border-bottom: 0;
}

.customer-record-status {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #edf7f1;
  color: #176043;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.customer-payment-list {
  display: grid;
}

.customer-payment-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #edf1ee;
}

.customer-payment-row:last-child {
  border-bottom: 0;
}

.customer-payment-main {
  display: grid;
  gap: 5px;
}

.customer-payment-main span {
  color: #7b8882;
  font-size: 12px;
}

.customer-payment-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px 14px;
}

.customer-payment-meta > span:not(.customer-record-status) {
  color: #75827b;
  font-size: 12px;
}


@media (max-width: 700px) {

  .customer-payment-row {
    grid-template-columns: 1fr;
  }

  .customer-payment-meta {
    justify-content: flex-start;
  }

}


/* =========================================================
   CUSTOMER PAYMENT REQUEST WORKSPACE
========================================================= */

.customer-payment-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #f7faf8;
}

.customer-payment-panel.hidden {
  display: none;
}

.customer-360-modal.is-payment
.customer-360-tabs,

.customer-360-modal.is-payment
.customer-360-content {
  display: none;
}

.customer-360-modal.is-payment
.customer-payment-panel {
  display: flex;
  flex-direction: column;
}

.customer-360-modal.is-payment
.customer-payment-panel
.customer-edit-heading {
  flex: 0 0 auto;
  margin: 0;
  padding: 18px 24px;
  border-bottom: 1px solid #e1e8e4;
}

.customer-360-modal.is-payment
#customer-payment-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
}

.customer-payment-vat-option {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: flex-start;
}

.customer-payment-vat-option input {
  width: auto;
}

.customer-payment-settlement,
.customer-payment-installment-options {
  grid-column: 1 / -1;
}

.customer-payment-settlement {
  display: grid;
  gap: 8px;
}

.customer-payment-settlement-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.customer-payment-settlement-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-payment-settlement-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.customer-payment-settlement-options label:has(input:checked) {
  border-color: #bde6c5;
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.customer-payment-settlement-options input {
  width: auto;
  margin: 0;
}

.customer-payment-installment-options {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
}

.customer-payment-installment-options.hidden {
  display: none;
}

.customer-payment-installment-note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.customer-payment-installment-preview {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
}

.customer-payment-installment-preview-row {
  display: grid;
  grid-template-columns:
    minmax(70px, .7fr)
    minmax(130px, 1fr)
    minmax(110px, .8fr);
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
}

.customer-payment-installment-preview-row span {
  color: var(--muted);
  font-size: 10px;
}

.customer-payment-installment-preview-row strong {
  color: var(--text);
  font-size: 12px;
}

.customer-payment-installment-preview-row small {
  color: var(--muted);
  font-size: 10px;
}


.customer-payment-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.customer-payment-summary > div {
  padding: 14px;
  border: 1px solid #dde6e0;
  border-radius: 11px;
  background: #fff;
}

.customer-payment-summary span {
  display: block;
  color: #77837e;
  font-size: 12px;
}

.customer-payment-summary strong {
  display: block;
  margin-top: 5px;
}

.customer-payment-open-link {
  min-height: 30px;
  padding: 5px 9px;
  text-decoration: none;
  font-size: 11px;
}

@media (max-width: 640px) {

  .customer-payment-summary {
    grid-template-columns: 1fr;
  }

  .customer-payment-installment-options {
    grid-template-columns: 1fr;
  }

  .customer-payment-installment-preview-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .customer-360-modal.is-payment
  .customer-payment-panel
  .customer-edit-heading,

  .customer-360-modal.is-payment
  #customer-payment-form {
    padding-inline: 14px;
  }

}


.customer-payment-archive {
  min-height: 30px;
  padding: 5px 9px;

  border: 1px solid #ead7d4;
  border-radius: 8px;

  background: #fff;
  color: #a14c42;

  font: inherit;
  font-size: 11px;

  cursor: pointer;
}

.customer-payment-archive:hover {
  background: #fff6f4;
}

.customer-payment-archive.confirming {
  color: #fff;
  background: #b44e43;
  border-color: #b44e43;
}

.customer-payment-archive:disabled {
  opacity: .65;
  cursor: wait;
}

/* =========================================================
   AKABER MAINTENANCE PAYMENT INVALIDATION V1
========================================================= */

.customer-payment-invalidation {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns:
    minmax(220px, 1fr) auto;
  gap: 8px 10px;
  align-items: end;
  margin-top: 3px;
  padding: 10px;
  border: 1px solid #ead9d6;
  border-radius: 10px;
  background: #fffaf9;
}

.customer-payment-invalidation label {
  display: grid;
  gap: 5px;
}

.customer-payment-invalidation label > span {
  color: #76534d;
  font-size: 11px;
  font-weight: 800;
}

.customer-payment-invalidation input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #d8c8c4;
  border-radius: 8px;
  background: #fff;
  color: #172033;
  font: inherit;
  font-size: 12px;
}

.customer-payment-invalidate {
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid #b42318;
  border-radius: 8px;
  background: #fff;
  color: #b42318;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.customer-payment-invalidate:hover {
  background: #fff1f0;
}

.customer-payment-invalidate:disabled {
  opacity: .55;
  cursor: default;
}

.customer-payment-invalidation-error {
  grid-column: 1 / -1;
  min-height: 16px;
  color: #b42318;
  font-size: 11px;
}

@media (max-width: 700px) {
  .customer-payment-invalidation {
    grid-template-columns: 1fr;
  }

  .customer-payment-invalidation input {
    min-height: 44px;
    font-size: 16px;
  }

  .customer-payment-invalidate {
    width: 100%;
    min-height: 44px;
  }

  .customer-payment-invalidation-error {
    grid-column: auto;
  }
}

/* =========================================================
   AKABER CUSTOMER ASSET ONBOARDING UI V1
========================================================= */

.customer-directory-toolbar {
  flex-wrap: wrap;
}

.customer-directory-create-button {
  min-height: 44px;
}

.customer-onboarding-panel,
.customer-asset-inline-form {
  border: 1px solid #dfe8e3;
  border-radius: 14px;
  background: #ffffff;
  padding: 18px;
  margin-bottom: 18px;
}

.customer-asset-inline-form {
  margin-top: 14px;
}

.customer-onboarding-heading,
.customer-assets-management-head,
.customer-site-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.customer-onboarding-heading {
  margin-bottom: 16px;
}

.customer-onboarding-heading h3,
.customer-assets-management-head h3 {
  margin: 4px 0 0;
}

.customer-onboarding-heading p {
  margin: 6px 0 0;
  color: #6f7d76;
  font-size: 13px;
  line-height: 1.7;
}

.customer-assets-management-head {
  margin-bottom: 16px;
}

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

.customer-onboarding-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.customer-onboarding-form label > span {
  color: #526159;
  font-size: 12px;
  font-weight: 700;
}

.customer-onboarding-form input,
.customer-onboarding-form select,
.customer-onboarding-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #d9e3dd;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  font: inherit;
}

.customer-onboarding-form textarea {
  min-height: 88px;
  resize: vertical;
}

.customer-onboarding-wide {
  grid-column: 1 / -1;
}

.customer-onboarding-message {
  min-height: 18px;
  color: #a13c36;
  font-size: 13px;
}

.customer-onboarding-actions {
  display: flex;
  justify-content: flex-end;
}

.customer-site-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.customer-empty-action {
  margin-top: 14px;
}

@media (max-width: 700px) {

  .customer-directory-toolbar,
  .customer-onboarding-heading,
  .customer-assets-management-head,
  .customer-site-heading,
  .customer-site-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .customer-directory-search {
    width: 100%;
  }

  .customer-directory-create-button,
  .customer-onboarding-actions .primary-action,
  .customer-assets-management-head .primary-action,
  .customer-site-actions .secondary-action,
  .customer-empty-action {
    width: 100%;
    min-height: 46px;
  }

  .customer-onboarding-form {
    grid-template-columns: 1fr;
  }

  .customer-onboarding-wide {
    grid-column: auto;
  }

  .customer-asset-inline-form,
  .customer-onboarding-panel {
    padding: 14px;
  }

  .customer-assets-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================
   AKABER CUSTOMER 360 TIMELINE UI V1
   ========================================================== */

.customer-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 18px;
}

.customer-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 22px;
}

.customer-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 38px;
  right: 20px;
  bottom: 0;
  width: 1px;
  background: var(
    --border-color,
    #e5e7eb
  );
}

.customer-timeline-icon {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.customer-timeline-body {
  min-width: 0;
  padding: 7px 0 0;
}

.customer-timeline-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.customer-timeline-heading strong {
  font-size: 14px;
}

.customer-timeline-heading time {
  flex: 0 0 auto;
  color: #6b7280;
  font-size: 12px;
  white-space: nowrap;
}

.customer-timeline-body p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.7;
}

.customer-timeline-success
.customer-timeline-icon {
  background: #f0fdf4;
}

.customer-timeline-payment
.customer-timeline-icon {
  background: #fffbeb;
}

.customer-timeline-maintenance
.customer-timeline-icon {
  background: #eff6ff;
}

.customer-timeline-contract
.customer-timeline-icon {
  background: #faf5ff;
}

.customer-timeline-asset
.customer-timeline-icon {
  background: #f8fafc;
}

.customer-timeline-empty {
  margin-top: 16px;
  padding: 24px;
  border: 1px dashed #d1d5db;
  border-radius: 14px;
  color: #6b7280;
  text-align: center;
}

@media (max-width: 700px) {

  .customer-timeline-item {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .customer-timeline-icon {
    width: 36px;
    height: 36px;
  }

  .customer-timeline-item:not(:last-child)::before {
    top: 34px;
    right: 18px;
  }

  .customer-timeline-heading {
    display: block;
  }

  .customer-timeline-heading time {
    display: block;
    margin-top: 4px;
    white-space: normal;
  }
}


/* ==========================================================
   AKABER CUSTOMER 360 COMM DOC UI V1 R4
   ========================================================== */

.customer-document-list,
.customer-communication-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.customer-document-card,
.customer-communication-card {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.customer-document-card {
  grid-template-columns:
    42px minmax(0, 1fr) auto;
}

.customer-communication-card {
  grid-template-columns:
    42px minmax(0, 1fr);
}

.customer-document-icon,
.customer-communication-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
}

.customer-document-icon {
  color: #b91c1c;
}

.customer-communication-whatsapp {
  background: #f0fdf4;
}

.customer-communication-email {
  background: #eff6ff;
}

.customer-document-body,
.customer-communication-body {
  min-width: 0;
}

.customer-document-heading,
.customer-communication-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-document-heading span,
.customer-communication-status {
  color: #64748b;
  font-size: 12px;
}

.customer-document-meta,
.customer-communication-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
}

.customer-communication-time {
  display: block;
  margin-top: 6px;
  color: #94a3b8;
  font-size: 12px;
}

.customer-document-open {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  cursor: pointer;
}

.customer-document-open:disabled {
  opacity: 0.55;
  cursor: wait;
}

.customer-communication-status.status-sent,
.customer-communication-status.status-delivered {
  color: #15803d;
}

.customer-communication-status.status-failed {
  color: #b91c1c;
}

.customer-communication-status.status-pending,
.customer-communication-status.status-queued,
.customer-communication-status.status-processing {
  color: #a16207;
}

@media (max-width: 700px) {

  .customer-document-card,
  .customer-communication-card {
    grid-template-columns:
      38px minmax(0, 1fr);
  }

  .customer-document-icon,
  .customer-communication-icon {
    width: 36px;
    height: 36px;
  }

  .customer-document-open {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }

  .customer-document-heading,
  .customer-communication-heading {
    display: block;
  }

  .customer-document-heading span,
  .customer-communication-status {
    display: inline-block;
    margin-top: 4px;
  }
}



/* AKABER CUSTOMER PAYMENT WORKSPACE V2 */

.customer-360-modal.is-payment
.customer-payment-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.customer-360-modal.is-payment
.customer-payment-panel
.customer-edit-heading {
  flex: 0 0 auto;
  margin: 0;
  padding: 18px 24px;
  background: #f7faf8;
  border-bottom: 1px solid #e1e8e4;
}

.customer-360-modal.is-payment
#customer-payment-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px 14px;
  overscroll-behavior: contain;
}

.customer-360-modal.is-payment
#customer-payment-form
.customer-edit-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding: 14px 0 4px;
  background: #f7faf8;
  border-top: 1px solid #dfe7e2;
  box-shadow:
    0 -8px 18px
    rgba(23, 45, 36, 0.035);
}

.customer-payment-tamara-option {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: start !important;
  justify-content: stretch !important;
  gap: 4px 10px !important;
  padding: 13px 14px;
  border: 1px solid #d8e6dd;
  border-radius: 11px;
  background: #fff;
}

.customer-payment-tamara-option input {
  width: auto !important;
  margin-top: 3px;
}

.customer-payment-tamara-option span {
  font-weight: 800;
  color: #28513d;
}

.customer-payment-tamara-option small {
  grid-column: 2;
  color: #718078;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 640px) {

  .customer-360-modal.is-payment
  .customer-payment-panel
  .customer-edit-heading {
    padding-inline: 14px;
  }

  .customer-360-modal.is-payment
  #customer-payment-form {
    padding-inline: 14px;
  }

  .customer-360-modal.is-payment
  #customer-payment-form
  .customer-edit-actions {
    margin-inline: 0;
    padding-inline: 0;
  }
}


/* AKABER CUSTOMER PAYMENTS V2A */

.customer-payment-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.customer-payment-provider {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid #dfe6e2;
  border-radius: 999px;
  background: #f8faf9;
  color: #66746d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.customer-payment-provider.is-selected {
  border-color: #9ec9b2;
  background: #edf7f1;
  color: #176043;
}

.customer-payment-provider small {
  font-size: 9px;
  font-weight: 800;
  opacity: 0.8;
}

.customer-payment-open-link {
  white-space: nowrap;
}


/* AKABER CUSTOMER PAYMENTS V2B1 */

.customer-payment-provider-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 5px;
}

.customer-payment-provider-send {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
}

.customer-payment-provider-send:disabled {
  opacity: .6;
  cursor: wait;
}

.customer-payment-provider-message {
  flex: 1 1 100%;
  min-height: 15px;
  color: #a14c42;
  font-size: 10px;
  font-weight: 700;
}

/* =========================================================
   CUSTOMER 360 INSTALLMENTS V1
========================================================= */

.customer-installments {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid #e1e8e4;
  border-radius: 16px;
  background: #ffffff;
}

.customer-installment-kpis {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.customer-installment-kpis > div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #e4ebe7;
  border-radius: 12px;
  background: #f8fbf9;
}

.customer-installment-kpis span {
  color: #75827b;
  font-size: 12px;
}

.customer-installment-kpis strong {
  font-size: 16px;
}

.customer-installment-list {
  display: grid;
  gap: 14px;
}

.customer-installment-plan {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e1e8e4;
  border-radius: 14px;
  background: #ffffff;
}

.customer-installment-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.customer-installment-plan-head > div {
  display: grid;
  gap: 5px;
}

.customer-installment-plan-head span,
.customer-installment-plan-totals span {
  color: #75827b;
  font-size: 12px;
}

.customer-installment-plan-totals {
  text-align: left;
}

.customer-installment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #f8fbf9;
  color: #64716b;
  font-size: 12px;
}

.customer-installment-table-wrap {
  overflow-x: auto;
}

.customer-installment-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.customer-installment-table th,
.customer-installment-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf1ee;
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
}

.customer-installment-table th {
  color: #64716b;
  background: #fafcfb;
  font-weight: 800;
}

.customer-installment-table tbody
tr:last-child td {
  border-bottom: 0;
}

.customer-installment-error {
  padding: 12px 14px;
  border: 1px solid #efcaca;
  border-radius: 10px;
  background: #fff7f7;
  color: #9a3232;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 700px) {

  .customer-installment-kpis {
    grid-template-columns: 1fr;
  }

  .customer-installment-plan-head {
    display: grid;
  }

  .customer-installment-plan-totals {
    text-align: right;
  }

}



.customer-payment-provider-message.customer-payment-success,
.customer-payment-success {
  color: var(--brand-dark);
  font-weight: 800;
}