/**
 * 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;
$green: #10b981;
$orange: #f59e0b;
$red: #ef4444;
$purple: #7c3aed;

.cbs-dashboard-container {
  background: #f0f2f5;
  min-height: 100vh;
}

.cbs-header {
  background: linear-gradient(135deg, $navy 0%, #1b3a5c 100%);
  color: white;
  padding: 6px 24px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;

  .header-date {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.8;
  }
}

.cbs-content {
  padding: 0 24px 12px;
  max-width: 1440px;
  margin: 0 auto;
}

.search-row {
  width: 100%;
  margin: 0;

  mat-card-content {
    width: 100%;
  }

  .search-field {
    width: 100%;
  }

  .mat-mdc-form-field {
    margin-bottom: 0;
  }
}

/* ─── Section Headers ─── */
.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;

  .section-icon {
    font-size: 16px;
  }

  &.regulatory {
    background: #e3f2fd;
    color: #0d47a1;
  }

  &.financial {
    background: #e8f5e9;
    color: #1b5e20;
  }

  &.deposits {
    background: #f3e5f5;
    color: #6a1b9a;
  }

  &.risk {
    background: #fce4ec;
    color: #b71c1c;
  }

  &.alerts {
    background: #fff3e0;
    color: #e65100;
  }
}

/* ─── Card Grid Layouts ─── */
.cards-row {
  display: grid;
  gap: 12px;
}

.four-col {
  grid-template-columns: repeat(4, 1fr);
}

.five-col {
  grid-template-columns: repeat(5, 1fr);
}

.three-col {
  grid-template-columns: repeat(3, 1fr);
}

.two-col {
  grid-template-columns: repeat(2, 1fr);
}

/* ─── Dashboard Cards ─── */
.dash-card {
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
  border: 1px solid #e8ecf0;
  transition:
    box-shadow 0.2s,
    transform 0.15s;

  &:hover {
    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
    transform: translateY(-1px);
  }
}

.card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.card-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;

  &.blue {
    background: $blue;
  }

  &.green {
    background: $green;
  }

  &.orange {
    background: $orange;
  }

  &.red {
    background: $red;
  }

  &.purple {
    background: $purple;
  }
}

.card-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.card-big-value {
  font-size: 32px;
  font-weight: 800;
  color: $navy;
  margin-bottom: 8px;
}

/* ─── Card Status Badges ─── */
.card-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;

  &.success {
    background: #ecfdf5;
    color: #065f46;
  }

  &.warning {
    background: #fffbeb;
    color: #92400e;
  }

  &.info {
    background: #eff6ff;
    color: #1e40af;
  }
}

/* ─── CRR/SLR Card Header Row ─── */
.mini-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  width: 100%;

  .mini-icon {
    margin-bottom: 0;
  }

  .mini-label {
    margin-bottom: 0;
    flex: 1;
  }
}

.view-details-btn {
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: 'Roboto Mono', monospace;
  transition: all 0.15s;
  flex-shrink: 0;
  white-space: nowrap;

  &:hover {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
  }
}

/* ─── CRR/SLR Metric Rows ─── */
.card-metrics {
  margin-bottom: 10px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #f1f5f9;

  &:last-child {
    border-bottom: none;
  }
}

.metric-label {
  font-size: 12px;
  color: #94a3b8;
}

.metric-value {
  font-size: 14px;
  font-weight: 700;
  color: $navy;
}

/* ─── DICSC Mini Table ─── */
.dicsc-card {
  padding: 14px;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 4px;

  th {
    text-align: right;
    font-weight: 600;
    color: #64748b;
    padding: 4px 6px;
    border-bottom: 2px solid #e2e8f0;
    font-size: 11px;

    &:first-child {
      text-align: left;
    }
  }

  td {
    text-align: right;
    padding: 5px 6px;
    color: $navy;
    font-weight: 600;
    border-bottom: 1px solid #f1f5f9;
  }

  .row-label {
    text-align: left;
    color: #64748b;
    font-weight: 500;
  }
}

/* ─── Interbank Exposure ─── */
.exposure-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.exposure-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 4px 0;
  color: #475569;
}

.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;

  &.maintain {
    background: #ecfdf5;
    color: #065f46;
  }

  &.exceed {
    background: #fef2f2;
    color: #991b1b;
  }
}

/* ─── Mini Cards (Financial Health) ─── */
.dash-card.mini {
  text-align: center;
  padding: 16px 12px;
}

.mini-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 18px;
  color: #fff;

  &.blue {
    background: $blue;
  }

  &.green {
    background: $green;
  }

  &.purple {
    background: $purple;
  }

  &.orange {
    background: $orange;
  }

  &.red {
    background: $red;
  }
}

.mini-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.mini-value {
  font-size: 22px;
  font-weight: 800;
  color: $navy;
}

.mini-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

.tag-success {
  background: #ecfdf5;
  color: #065f46;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

.tag-warning {
  background: #fffbeb;
  color: #92400e;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

.tag-danger {
  background: #fef2f2;
  color: #991b1b;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

/* ─── Compact Detail Cards ─── */
.dash-card.compact {
  padding: 12px 16px;
}

.compact-header {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.compact-icon {
  font-size: 14px;

  &.purple-text {
    color: $purple;
  }

  &.orange-text {
    color: $orange;
  }
}

.exposure-pct {
  font-weight: 700;
  color: $navy;
  margin-left: auto;
  margin-right: 8px;
}

/* ─── Deposits vs Advances ─── */
.da-compare {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.da-item {
  .da-label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 2px;
  }

  .da-value {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;

    &.deposit {
      color: $blue;
    }

    &.advance {
      color: $purple;
    }
  }
}

.da-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.da-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease;

  &.deposit-fill {
    background: linear-gradient(90deg, $blue, #42a5f5);
  }

  &.advance-fill {
    background: linear-gradient(90deg, $purple, #a78bfa);
  }
}

/* ─── PSL Breakdown ─── */
.psl-breakdown {
  margin-top: 8px;
}

.psl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.psl-label {
  font-size: 12px;
  color: #64748b;
  width: 100px;
  flex-shrink: 0;
}

.psl-bar-wrap {
  flex: 1;
  height: 10px;
  background: #f1f5f9;
  border-radius: 5px;
  overflow: hidden;
}

.psl-bar {
  height: 100%;
  border-radius: 5px;

  &.weaker {
    background: $orange;
  }

  &.msme {
    background: $green;
  }
}

.psl-pct {
  font-size: 13px;
  font-weight: 700;
  color: $navy;
  width: 36px;
  text-align: right;
}

/* ─── Priority Sector Lending — Open button ─── */
.psl-card {
  .card-top {
    align-items: center;
  }
}

.psl-open-btn {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;

  &:hover {
    background: #dcfce7;
    border-color: #16a34a;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgb(22 163 74 / 20%);
  }
}

/* ─── Credit Information Companies — DQR ─── */
.cic-card {
  .card-top {
    margin-bottom: 0;
    align-items: center;
  }
}

.cic-open-btn {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #6d28d9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;

  &:hover {
    background: #ede9fe;
    border-color: #6d28d9;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgb(109 40 217 / 20%);
  }
}

.cic-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.3px;
  margin: 2px 0 10px;
}

.quality-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

.quality-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;

  .quality-label {
    flex: 1;
    min-width: 0;
  }

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.cic-logo {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  flex-shrink: 0;
  object-fit: contain;
}

.quality-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cic-name {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.cic-full {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.3;
}

.dqr-percent {
  font-size: 14px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  letter-spacing: 0.3px;

  &.good {
    background: #ecfdf5;
    color: #065f46;
  }

  &.moderate {
    background: #fffbeb;
    color: #92400e;
  }

  &.low {
    background: #fef2f2;
    color: #991b1b;
  }
}

/* ─── NPA Gauge Cards ─── */
.npa-gauge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.npa-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  &.gross {
    background: conic-gradient($red 0% 7%, #fee2e2 7% 100%);
    box-shadow: inset 0 0 0 12px #fff;
  }

  &.net {
    background: conic-gradient($green 0% 2%, #ecfdf5 2% 100%);
    box-shadow: inset 0 0 0 12px #fff;
  }
}

.npa-pct {
  font-size: 18px;
  font-weight: 800;
  color: $navy;
}

.npa-detail {
  .npa-status {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;

    &.success {
      color: #065f46;
    }

    &.warning {
      color: #b45309;
    }
  }

  .npa-note {
    font-size: 11px;
    color: #94a3b8;
  }
}

/* ─── Risk Summary ─── */
.risk-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 12px;
}

.risk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
}

.risk-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;

  &.green {
    background: $green;
  }

  &.yellow {
    background: $orange;
  }

  &.red {
    background: $red;
  }
}

.risk-val {
  margin-left: auto;
  font-weight: 700;
  color: $navy;
}

/* ─── Alerts ─── */
.alert-panel {
  background: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  border: 1px solid #e8ecf0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alert-item {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;

  &.warning {
    background: #fffbeb;
    color: #92400e;
    border-left: 3px solid $orange;
  }

  &.info {
    background: #eff6ff;
    color: #1e40af;
    border-left: 3px solid $blue;
  }
}

/* ─── Responsive ─── */
@media screen and (width <= 1200px) {
  .four-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .five-col {
    grid-template-columns: repeat(3, 1fr);
  }

  .three-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (width <= 768px) {
  .four-col,
  .five-col,
  .three-col {
    grid-template-columns: 1fr;
  }

  .card-big-value {
    font-size: 26px;
  }

  .mini-value {
    font-size: 18px;
  }

  .cbs-header {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
}