/* ==========================================================================
   SIMS Design System: Cards, Widgets & Health Gauge
   Branding: Navy Blue Beige Wedding Dark (#FCF1D0 Main)
   Rule F.6 Compliant: Modular stylesheet (<300 lines)
   Rule 2 Compliant: Zero emoji
   ========================================================================== */

/* Glassmorphism Cards */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
}

.glass-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6), 0 0 12px rgba(252, 241, 208, 0.08);
}

/* KPI Summary Cards Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: var(--transition-fast);
}

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(252, 241, 208, 0.35);
  background: rgba(34, 57, 111, 0.7);
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(252, 241, 208, 0.5), transparent);
}

.kpi-card.indigo::before { background: linear-gradient(90deg, #6366F1, transparent); }
.kpi-card.emerald::before { background: linear-gradient(90deg, #10B981, transparent); }
.kpi-card.rose::before { background: linear-gradient(90deg, #F43F5E, transparent); }
.kpi-card.cyan::before { background: linear-gradient(90deg, #06B6D4, transparent); }
.kpi-card.gold::before { background: linear-gradient(90deg, #F59E0B, transparent); }

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

.kpi-title {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.kpi-value {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: -1px;
  color: #FFFFFF;
}

.kpi-sub {
  font-size: 13px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.text-success { color: #10B981; }
.text-danger { color: #F43F5E; }
.text-primary { color: #FCF1D0; }
.text-ai { color: #06B6D4; }

/* Dashboard 2-Column Section */
.dashboard-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.dashboard-charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "velocity allocation" "calendar allocation";
  align-items: start;   /* a collapsed calendar must not stretch to the height of the allocation card */
  gap: 20px;
  margin-bottom: 24px;
}

.chart-velocity { grid-area: velocity; }
.chart-allocation { grid-area: allocation; align-self: stretch; }  /* flush with the bottom of the calendar */
.chart-calendar { grid-area: calendar; }

.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.dashboard-goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* Financial Health Widget */
.health-gauge-box {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.gauge-circle {
  width: 110px;
  height: 110px;
  border-radius: var(--radius-full);
  background: conic-gradient(#10B981 calc(var(--score) * 1%), rgba(252, 241, 208, 0.15) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}

.gauge-inner {
  width: 86px;
  height: 86px;
  background: #010736;
  border: 1px solid rgba(252, 241, 208, 0.2);
  border-radius: var(--radius-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.gauge-score {
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #FCF1D0;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(252, 241, 208, 0.10);
  font-size: 13px;
}

.metric-name { color: var(--text-muted); }
.metric-value { font-weight: 700; font-family: var(--font-mono); color: #FFFFFF; }

/* Smart Alerts */
.alert-card {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid;
  transition: var(--transition-fast);
}

.alert-card.high {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.35);
  color: #FECDD3;
}

.alert-card.info {
  background: rgba(6, 182, 212, 0.10);
  border-color: rgba(6, 182, 212, 0.28);
  color: #CFFAFE;
}

.alert-content h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #FFFFFF;
}

.alert-content p {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-dismiss {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
}

.btn-dismiss:hover {
  color: #FFFFFF;
}

/* U-1 compact dashboard: one row of KPI tiles, a standing row, collapsible reference sections */
.kpi-grid-compact { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-grid-compact .kpi-card { padding: 14px 16px; }
.kpi-grid-compact .kpi-value { font-size: 19px; white-space: nowrap; }
.dashboard-standing { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.collapsible > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary::after { content: "\25BE"; color: var(--text-muted); transition: transform 0.15s; }
.collapsible[open] > summary::after { transform: rotate(180deg); }
.dashboard-columns .custom-table td { padding-top: 8px; padding-bottom: 8px; }
/* Never let the left column's table push the side column off-screen; stack below 900 px (U-1b) */
.dashboard-columns { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .dashboard-columns { grid-template-columns: minmax(0, 1fr); } }
#tx-results .custom-table td { padding: 4px 16px; }

/* Shared icon button (edit, delete): it had no style, so browsers drew a white box (U-5) */
.btn-icon {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; transition: var(--transition-fast);
}
.btn-icon:hover { color: var(--text-main); border-color: rgba(252, 241, 208, 0.4); }