/**
 * 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/.
 */

$navy: #0d1b2a;
$blue: #1e88e5;
$blue-d: #1e40af;
$indigo: #4f46e5;
$border: #e2e8f0;

.csa-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px;
}

/* ─── Hero header (matches Nexora pages) ────────────────────────────── */
.csa-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;

  &__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, $blue 0%, $indigo 100%);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 2px 8px rgb(29 78 216 / 25%);
    flex-shrink: 0;
  }

  &__title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: $navy;
    line-height: 1.1;
    letter-spacing: 0.02em;
  }

  &__sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: #64748b;
  }
}

/* ─── Wizard tab strip ──────────────────────────────────────────────── */
.csa-tabs {
  background: #fff;
  border: 1px solid $border;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
  overflow: hidden;

  ::ng-deep {
    .mat-mdc-tab-header {
      background: #f8fafc;
      border-bottom: 1px solid $border;
    }

    .mat-mdc-tab {
      min-width: 140px;
      height: 50px;
      padding: 0 22px;
      font-size: 13px !important;
      font-weight: 600 !important;
      letter-spacing: 0.01em;
      color: #475569 !important;
      opacity: 1 !important;
    }

    .mat-mdc-tab:hover:not(.mdc-tab--active, .mat-mdc-tab-disabled) {
      background: rgb(30 64 175 / 5%);
      color: $navy !important;
    }

    .mat-mdc-tab.mdc-tab--active {
      .mdc-tab__text-label {
        color: $blue-d !important;
        font-weight: 700 !important;
      }
    }

    /* Active-tab underline indicator — slightly bolder than Material's default. */
    .mdc-tab-indicator__content--underline {
      border-color: $blue-d !important;
      border-top-width: 3px !important;
    }

    .mat-mdc-tab.mat-mdc-tab-disabled {
      opacity: 0.45 !important;
      cursor: not-allowed;
    }

    .mat-mdc-tab-body-wrapper {
      min-height: 320px;
    }

    .mat-mdc-tab-body,
    .mat-mdc-tab-body-content {
      overflow: visible !important;
    }
  }
}

.csa-tab__icon {
  margin-right: 8px;
  font-size: 13px;
}

/* ─── Tab body + action bar ─────────────────────────────────────────── */
.csa-tab-body {
  padding: 24px;

  @media (width <= 768px) {
    padding: 16px;
  }
}

.csa-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;

  &__spacer {
    flex: 1;
  }

  button {
    height: 40px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 0 18px !important;
  }
}

/* Utility helpers preserved from the prior stepper template. */
.m-l-10 {
  margin-left: 8px;
}

.m-r-10 {
  margin-right: 8px;
}