/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

.section-block {
  margin-bottom: 8px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0;

  .section-icon {
    color: var(--md-sys-color-primary, #1074b9);
    font-size: 14px;
  }
}

.add-btn {
  font-size: 13px;
}

.empty-state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  color: rgb(0 0 0 / 45%);
  font-size: 14px;
  background: rgb(0 0 0 / 2%);
  border-radius: 6px;
  border: 1px dashed rgb(0 0 0 / 12%);

  .empty-icon {
    font-size: 18px;
  }
}

.address-panel {
  margin-bottom: 8px;

  .panel-icon {
    margin-right: 8px;
    font-size: 13px;
    color: rgb(0 0 0 / 45%);
  }
}

.address-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin: 8px 0 4px;
}

.address-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  padding: 8px 0;
}

.detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-label {
  font-size: 12px;
  color: rgb(0 0 0 / 50%);
  font-weight: 500;
}

.detail-value {
  font-size: 14px;
  color: #333;
}

@media (width <= 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .address-details {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Read-only / disabled form-field overrides
   ─── Mirrors the India-address step so view-mode addresses stay
        legible instead of looking ghosted at 0.38 opacity.
   ═══════════════════════════════════════════════════════════════ */
:host ::ng-deep {
  .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled {
    opacity: 1;

    .mat-mdc-input-element,
    input.mat-mdc-input-element,
    textarea.mat-mdc-input-element {
      color: #0f172a !important;
      -webkit-text-fill-color: #0f172a !important;
      font-weight: 600;
      caret-color: transparent;
    }

    .mat-mdc-floating-label,
    .mdc-floating-label {
      color: #64748b !important;
      opacity: 1 !important;
    }

    .mdc-notched-outline__leading,
    .mdc-notched-outline__notch,
    .mdc-notched-outline__trailing {
      border-color: #cbd5e1 !important;
      border-width: 1px !important;
    }

    .field-prefix-icon mat-icon,
    .mat-mdc-form-field-icon-prefix mat-icon,
    .mat-mdc-form-field-icon-suffix mat-icon {
      color: #475569 !important;
      opacity: 1;
    }

    .mat-mdc-form-field-hint {
      color: #64748b !important;
      opacity: 1;
    }

    .mat-mdc-select-value-text,
    .mat-mdc-select-value {
      color: #0f172a !important;
      -webkit-text-fill-color: #0f172a !important;
      font-weight: 600;
    }

    .mat-mdc-select-arrow {
      color: #94a3b8 !important;
    }
  }
}