/* Pella Design Polish — Shared Styles */
/* Google Fonts loaded via <link> in each HTML */

/* ===== FONTS ===== */
body, h1, h2, h3, h4, h5, h6, .scorecard-value, .scorecard-label,
.data-table, .btn, .btn-apply, .btn-pill, .filter-pill, .pill,
input, select, textarea, button {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ===== KPI SCORECARDS ===== */
.scorecard-value {
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
}
.scorecard-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
}
.scorecard-sub {
  font-size: 11px !important;
}

/* ===== SOFT GRADIENT AURAS ===== */
.scorecard {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(232, 134, 155, 0.12) !important;
  border: 1px solid rgba(240, 221, 227, 0.6) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
.scorecard:hover {
  box-shadow: 0 6px 30px rgba(232, 134, 155, 0.2) !important;
  transform: translateY(-2px);
}

.chart-card, .table-card {
  border-radius: 12px !important;
  box-shadow: 0 2px 16px rgba(180, 140, 200, 0.08) !important;
  transition: box-shadow 0.3s ease !important;
}
.chart-card:hover, .table-card:hover {
  box-shadow: 0 4px 24px rgba(180, 140, 200, 0.14) !important;
}

.product-card {
  border-radius: 12px !important;
  box-shadow: 0 2px 16px rgba(180, 140, 200, 0.08) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
.product-card:hover {
  box-shadow: 0 6px 30px rgba(232, 134, 155, 0.18) !important;
  transform: translateY(-2px);
}

.shipment-card {
  border-radius: 12px !important;
  box-shadow: 0 2px 16px rgba(180, 140, 200, 0.08) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
.shipment-card:hover {
  box-shadow: 0 6px 30px rgba(232, 134, 155, 0.18) !important;
  transform: translateY(-2px);
}

/* ===== TABLE POLISH ===== */
.data-table tr {
  transition: background 0.2s ease !important;
}
.data-table tr:hover td {
  background: rgba(232, 134, 155, 0.04) !important;
}

/* ===== BUTTON POLISH ===== */
.btn, .btn-pill, .export-btn {
  transition: all 0.3s ease !important;
}
.btn:hover {
  border-color: #e8869b !important;
  color: #e8869b !important;
  box-shadow: 0 2px 12px rgba(232, 134, 155, 0.15) !important;
}
.btn-apply {
  transition: all 0.3s ease !important;
  border-radius: 8px !important;
}
.btn-apply:hover {
  box-shadow: 0 4px 16px rgba(232, 134, 155, 0.3) !important;
  transform: translateY(-1px);
}

/* ===== PILL / FILTER POLISH ===== */
.pill, .filter-pill {
  transition: all 0.3s ease !important;
}
.pill:hover:not(.active), .filter-pill:hover:not(.active) {
  border-color: #e8869b !important;
  color: #e8869b !important;
  background: rgba(232, 134, 155, 0.05) !important;
}

/* ===== SIDEBAR POLISH ===== */
.sidebar-nav a {
  transition: all 0.3s ease !important;
  border-radius: 0 8px 8px 0;
}

/* ===== TOPBAR POLISH ===== */
.topbar select, .topbar input {
  transition: all 0.3s ease !important;
  border-radius: 8px !important;
}

/* ===== LAST UPDATED BADGE ===== */
.last-updated-badge {
  position: absolute;
  top: 12px;
  right: 24px;
  font-size: 11px;
  color: #8c7a8a;
  background: rgba(240, 221, 227, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* ===== PAGE HEADERS ===== */
.page-header h1 {
  font-weight: 700 !important;
  letter-spacing: -0.3px;
}

/* ===== ALERT BANNER POLISH ===== */
.alert-banner {
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

/* ===== CONNECT PAGE POLISH ===== */
.card {
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(232, 134, 155, 0.1) !important;
}

/* ===== SMOOTH SCROLL ===== */
html {
  scroll-behavior: smooth;
}