/**
 * Modern metric / summary cards — sama dengan /admin/billing/invoices
 * Dipakai global di seluruh halaman admin, teknisi, sales, dll.
 */

/* ========== MODERN CARD (invoices model) ========== */
.metric-card-modern,
.summary-stat-card,
.stat-card-modern {
  position: relative;
  overflow: hidden;
  border: none;
  color: #ffffff !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.metric-card-modern:hover,
.summary-stat-card:hover,
.stat-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.2);
}

.metric-card-modern.filter-card,
.summary-stat-card.filter-card,
.metric-card.filter-card,
.metric-card-modern[data-link] {
  cursor: pointer;
}

a.metric-card-modern {
  display: block;
  text-decoration: none !important;
  color: #ffffff !important;
}

a.metric-card-modern:hover,
a.metric-card-modern:focus {
  color: #ffffff !important;
}

.metric-card-modern.filter-card.active,
.summary-stat-card.filter-card.active,
.metric-card.filter-card.active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.58), 0 22px 42px rgba(15, 23, 42, 0.22);
  transform: translateY(-2px);
}

.metric-card-modern::before,
.metric-card-modern::after,
.summary-stat-card::before,
.summary-stat-card::after,
.stat-card-modern::before,
.stat-card-modern::after,
.metric-card:not(.metric-card-modern)::before,
.metric-card:not(.metric-card-modern)::after,
.card.stats-card::before,
.card.stats-card::after,
.cache-stats-card::before,
.cache-stats-card::after,
.stats-card::before,
.stats-card::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.metric-card-modern::before,
.summary-stat-card::before,
.stat-card-modern::before,
.metric-card:not(.metric-card-modern)::before,
.card.stats-card::before,
.cache-stats-card::before,
.stats-card::before {
  width: 170px;
  height: 170px;
  top: -76px;
  right: -46px;
  background: rgba(255, 255, 255, 0.14);
}

.metric-card-modern::after,
.summary-stat-card::after,
.stat-card-modern::after,
.metric-card:not(.metric-card-modern)::after,
.card.stats-card::after,
.cache-stats-card::after,
.stats-card::after {
  width: 120px;
  height: 120px;
  bottom: -54px;
  right: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.metric-card-modern {
  border-radius: 20px;
  padding: 1.2rem 1.2rem 1rem;
  min-height: 184px;
}

.metric-card-modern .metric-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 116px;
}

.metric-card-modern .metric-card-icon,
.metric-card:not(.metric-card-modern) .metric-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.metric-card-modern .metric-card-label,
.metric-card:not(.metric-card-modern) .metric-card-label {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}

.metric-card-modern .metric-card-value,
.metric-card:not(.metric-card-modern) .metric-card-value {
  font-size: clamp(1.75rem, 2.35vw, 2.35rem);
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.08;
  word-break: break-word;
  margin: 0.35rem 0 0.45rem;
}

.metric-card-modern .metric-card-subtext,
.metric-card:not(.metric-card-modern) .metric-card-subtext {
  font-size: 0.9rem;
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.92) !important;
}

.metric-card-modern .metric-card-footer {
  position: relative;
  z-index: 1;
  margin-top: 0.85rem;
  padding-top: 0.72rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Color variants — modern */
.metric-card-modern--primary,
.metric-card-modern.metric-card-modern--primary { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; }
.metric-card-modern--success { background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important; }
.metric-card-modern--warning { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important; }
.metric-card-modern--danger  { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important; }
.metric-card-modern--info    { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important; }
.metric-card-modern--purple  { background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%) !important; }
.metric-card-modern--secondary { background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%) !important; }
.metric-card-modern--teal    { background: linear-gradient(135deg, #14b8a6 0%, #5eead4 100%) !important; }
.metric-card-modern--pink    { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%) !important; }

/* ========== LEGACY .metric-card (auto-upgrade layout) ========== */
.metric-card:not(.metric-card-modern) {
  position: relative;
  overflow: hidden;
  border: none !important;
  border-radius: 20px !important;
  padding: 1.2rem 1.2rem 1rem !important;
  min-height: 150px;
  color: #ffffff !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label icon"
    "value icon"
    "subtext icon";
  align-items: start;
  gap: 0 1rem;
}

.metric-card:not(.metric-card-modern):hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.2);
}

.metric-card:not(.metric-card-modern) .metric-card-icon {
  grid-area: icon;
  align-self: start;
}

.metric-card:not(.metric-card-modern) .metric-card-label { grid-area: label; margin-top: 0; }
.metric-card:not(.metric-card-modern) .metric-card-value { grid-area: value; margin: 0.2rem 0; font-size: clamp(1.5rem, 2vw, 2rem); }
.metric-card:not(.metric-card-modern) .metric-card-subtext { grid-area: subtext; }

.metric-card-primary:not(.metric-card-modern),
.metric-card.metric-card-primary { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; }
.metric-card-success:not(.metric-card-modern),
.metric-card.metric-card-success { background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important; }
.metric-card-warning:not(.metric-card-modern),
.metric-card.metric-card-warning { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important; }
.metric-card-danger:not(.metric-card-modern),
.metric-card.metric-card-danger  { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important; }
.metric-card-info:not(.metric-card-modern),
.metric-card.metric-card-info    { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important; }
.metric-card-purple:not(.metric-card-modern),
.metric-card.metric-card-purple  { background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%) !important; }
.metric-card-secondary:not(.metric-card-modern),
.metric-card.metric-card-secondary { background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%) !important; }
.metric-card-teal:not(.metric-card-modern),
.metric-card.metric-card-teal    { background: linear-gradient(135deg, #14b8a6 0%, #5eead4 100%) !important; }
.metric-card-pink:not(.metric-card-modern),
.metric-card.metric-card-pink    { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%) !important; }

/* ========== LEGACY .stats-card / .cache-stats-card ========== */
.card.stats-card,
.cache-stats-card,
.stats-card:not(.metric-card-modern) {
  position: relative;
  overflow: hidden;
  border: none !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  min-height: 120px;
}

.card.stats-card:hover,
.cache-stats-card:hover,
.stats-card:not(.metric-card-modern):hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.2);
}

.card.stats-card .card-body,
.cache-stats-card .card-body,
.stats-card .card-body {
  position: relative;
  z-index: 1;
  color: #ffffff !important;
}

.card.stats-card .card-title,
.card.stats-card h6,
.stats-card h6,
.stats-card p,
.cache-stats-card h6,
.cache-stats-card p {
  color: rgba(255, 255, 255, 0.92) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem !important;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.card.stats-card h4,
.card.stats-card h3,
.card.stats-card h2,
.stats-card h3,
.stats-card h4,
.cache-stats-card h3,
.cache-stats-card h4 {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: clamp(1.5rem, 2vw, 2rem) !important;
  margin-bottom: 0 !important;
}

.card.stats-card .stats-icon,
.stats-card .stats-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 1.35rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.card.stats-card:has(.stats-icon.success),
.stats-card:has(.stats-icon.success) { background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important; }
.card.stats-card:has(.stats-icon.warning),
.stats-card:has(.stats-icon.warning) { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important; }
.card.stats-card:has(.stats-icon.danger),
.stats-card:has(.stats-icon.danger) { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important; }
.card.stats-card:has(.stats-icon.info),
.stats-card:has(.stats-icon.info) { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important; }
.card.stats-card:has(.stats-icon.primary),
.stats-card:has(.stats-icon.primary) { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; }
.card.stats-card:has(.stats-icon.secondary),
.stats-card:has(.stats-icon.secondary) { background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%) !important; }

/* Bootstrap colored info cards */
.card.text-white.bg-primary,
.card.text-bg-primary { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; border: none; border-radius: 20px; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14); }
.card.text-white.bg-success,
.card.text-bg-success { background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important; border: none; border-radius: 20px; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14); }
.card.text-white.bg-warning,
.card.text-bg-warning { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important; border: none; border-radius: 20px; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14); }
.card.text-white.bg-danger,
.card.text-bg-danger  { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important; border: none; border-radius: 20px; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14); }
.card.text-white.bg-info,
.card.text-bg-info    { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important; border: none; border-radius: 20px; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14); }

/* Row wrapper */
.metric-cards-row,
#summaryCardsRow {
  --bs-gutter-x: 1rem;
}

@media (max-width: 768px) {
  .metric-card-modern {
    min-height: 168px;
    border-radius: 18px;
    padding: 1rem;
  }

  .metric-card-modern .metric-card-body {
    min-height: auto;
  }

  .metric-card-modern .metric-card-icon,
  .metric-card:not(.metric-card-modern) .metric-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.2rem;
  }

  .metric-card-modern .metric-card-value,
  .metric-card:not(.metric-card-modern) .metric-card-value {
    font-size: 1.6rem;
  }

  .metric-card-modern .metric-card-subtext {
    font-size: 0.82rem;
  }

  .metric-card:not(.metric-card-modern) {
    min-height: 130px;
    padding: 1rem !important;
  }
}