/* =========================================================
   ALFAA ERP - GLOBAL KPI DISPLAY STANDARD
   File: assets/css/global-kpi-display.css
   Scope: KPI cards, summary widgets and analytical financial metrics.
   Dashboard uses its original sizing and is compacted only if a value actually overflows.

   Display Rules:
   - Values always remain on one line.
   - Responsive font fitting is applied before compact formatting.
   - JavaScript applies K / M / B / T compact format only when required.
   - Full original value remains available on hover via title attribute.
   ========================================================= */

/* =========================================================
   VALUE ELEMENT STANDARD
   Applied dynamically by globalKpiDisplay.js.
   ========================================================= */
.kpi-value-standard {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-overflow: ellipsis;
  overflow: hidden;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.018em !important;
  line-height: 1.15 !important;
  transition: font-size 120ms ease;
}

/* Step 1: Scale gently before values are abbreviated. */
.kpi-value-standard.kpi-value--fit {
  font-size: clamp(0.94rem, 1.05vw, 1.18rem) !important;
  letter-spacing: -0.028em !important;
}

/* Step 2: Compact formatted value can fit into narrow KPI panels. */
.kpi-value-standard.kpi-value--compact {
  font-size: clamp(0.92rem, 1.03vw, 1.16rem) !important;
  letter-spacing: -0.022em !important;
}

/* Step 3: Last safe fit; remains readable and never wraps. */
.kpi-value-standard.kpi-value--compact-fit {
  font-size: clamp(0.82rem, 0.95vw, 1rem) !important;
  letter-spacing: -0.035em !important;
}

/* =========================================================
   CONTAINER SAFETY
   Prevent icons or companion text from forcing KPI value overflow.
   ========================================================= */
.kpi-standard-card,
.kpi-standard-card > div,
.kpi-standard-card .ret-kpi-body,
.kpi-standard-card .cb-kpi__body {
  min-width: 0;
}

/* =========================================================
   KNOWN CARD VALUES - IMMEDIATE NO-WRAP FALLBACK
   This protects initial render before JavaScript enhances values.
   ========================================================= */
.dash-kpi-card strong,
.dash-mini-card strong,
.sales-kpi-card strong,
.sales-donut strong,
.sales-mode-card .mode-amount,
.purchase-kpi-card strong,
.purchase-mode-card strong,
.stock-kpi-card strong,
.stock-donut strong,
.stock-category-donut strong,
.expense-kpi-value,
.expense-donut strong,
.ret-kpi-body strong,
.ret-donut strong,
.cb-kpi__body strong,
.cb-donut__inside strong,
.bb-kpi strong,
.pay-kpi strong,
.pay-donut strong,
.crm-kpi-card strong,
.crm-summary-card strong,
.module-kpi strong,
.sale-summary-card strong,
.purchase-summary-card strong,
.summary-card .summary-line strong,
.grand-total-card strong,
.cb-summary-row [data-summary-amount],
.cb-effect-row strong {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-overflow: ellipsis;
  overflow: hidden;
  font-variant-numeric: tabular-nums lining-nums;
}

/* =========================================================
   ANALYTICS CENTRE LABELS
   Existing cards used manual line breaks; force single value line.
   ========================================================= */
.sales-donut strong,
.purchase-donut strong,
.stock-donut strong,
.stock-category-donut strong,
.expense-donut strong,
.ret-donut strong,
.cb-donut__inside strong,
.pay-donut strong {
  display: block;
  line-height: 1.12 !important;
}

/* =========================================================
   FORM SUMMARY VALUES
   Maintain aligned value column while allowing the amount to compact.
   ========================================================= */
.summary-card .summary-line,
.cb-summary-row,
.cb-effect-row {
  min-width: 0;
}

.summary-card .summary-line strong,
.grand-total-card strong,
.cb-summary-row [data-summary-amount],
.cb-effect-row strong {
  text-align: right;
}

/* =========================================================
   RESPONSIVE REFINEMENT
   ========================================================= */
@media (max-width: 1280px) {
  .kpi-value-standard {
    letter-spacing: -0.025em !important;
  }
}

@media (max-width: 640px) {
  .kpi-value-standard,
  .kpi-value-standard.kpi-value--fit,
  .kpi-value-standard.kpi-value--compact,
  .kpi-value-standard.kpi-value--compact-fit {
    font-size: clamp(0.9rem, 4.2vw, 1.15rem) !important;
  }
}


/* =========================================================
   V4 - CUSTOMER / SUPPLIER KPI STABILITY AND FULL VALUE HOVER
   ========================================================= */

/* Customer / Supplier KPI cards have icon + value content in a flex row.
   Keep the metric content shrinkable so one large amount does not disturb
   the card layout. */
.crm-kpi-card > div:last-child,
.crm-summary-card {
  min-width: 0;
}

/* Full original amount tooltip appears only where a value was compacted.
   Example: visible PKR 560.2K; hover tooltip shows PKR 560,200.00. */
.kpi-standard-card.kpi-has-full-value-tooltip {
  position: relative;
}

.kpi-standard-card.kpi-has-full-value-tooltip:hover::after {
  content: attr(data-kpi-full-value);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  z-index: 9000;
  min-width: max-content;
  max-width: min(280px, calc(100vw - 30px));
  padding: 7px 10px;
  border-radius: 8px;
  color: #ffffff;
  background: #0f172a;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.kpi-standard-card.kpi-has-full-value-tooltip:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  z-index: 9001;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #0f172a;
  pointer-events: none;
}


/* =========================================================
   V5 - ALL CURRENT ERP KPI CARDS: FULL-VALUE HOVER COVERAGE
   ========================================================= */

/* Newly implemented KPI / financial metric cards must shrink safely and
   retain the same hover-original-value behavior as Customer/Supplier cards. */
.stock-product-kpi,
.stock-product-kpi > *,
.stock-adjust-summary,
.finance-doc-amount-card,
.shopify-detail-summary,
[data-kpi-card] {
  min-width: 0;
}

/* Show that the compact amount carries the complete value on hover. */
.kpi-value-standard[data-kpi-is-compact="1"] {
  cursor: help;
}


/* =========================================================
   V6 - PROFESSIONAL TOOLTIP FOR ALL KPI VALUES
   Replaces the browser's default title tooltip with the ALFAA styled tooltip
   whether the value is full-size or compacted.
   ========================================================= */
.kpi-standard-card.kpi-has-full-value-tooltip {
  overflow: visible !important;
}

.kpi-standard-card.kpi-has-full-value-tooltip .kpi-value-standard {
  cursor: help;
}

.kpi-standard-card.kpi-has-full-value-tooltip:hover::after {
  padding: 8px 12px;
  border-radius: 9px;
  color: #ffffff;
  background: #0f172a;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .22);
}


/* =========================================================
   V7 - KPI TOOLTIP CORRECTION + FIRST-PAINT STABILITY
   ========================================================= */

/*
 * Remove the old card pseudo-tooltip. It could be clipped by Purchase/Sale
 * detail containers and it appeared even where the full value was already
 * visible. The JS fixed-position tooltip below is shown only for compact
 * K/M/B/T values.
 */
.kpi-standard-card.kpi-has-full-value-tooltip:hover::after,
.kpi-standard-card.kpi-has-full-value-tooltip:hover::before {
  display: none !important;
  content: none !important;
}

/* Professional tooltip portal: never clipped by module/card overflow. */
.global-kpi-tooltip {
  position: fixed;
  z-index: 50000;
  display: none;
  align-items: center;
  min-width: max-content;
  max-width: min(290px, calc(100vw - 20px));
  padding: 8px 12px;
  border-radius: 10px;
  color: #ffffff;
  background: #0f172a;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .24);
  font: 700 12px/1.2 "Inter", Arial, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.global-kpi-tooltip.is-visible {
  display: inline-flex;
}

.global-kpi-tooltip i {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #0f172a;
}

.global-kpi-tooltip.is-below i {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #0f172a;
}

/*
 * Prevent raw large amounts from painting for one frame before JavaScript
 * converts them to their final fitted/compact display. The fallback reveal
 * ensures values remain visible if JavaScript is delayed.
 */
.dash-kpi-card strong,
.dash-mini-card strong,
.sales-kpi-card strong,
.sales-donut strong,
.sales-mode-card .mode-amount,
.purchase-kpi-card strong,
.purchase-donut strong,
.purchase-mode-line strong,
.stock-kpi-card strong,
.stock-donut strong,
.stock-category-donut strong,
.stock-status-line em,
.stock-category-line em,
.expense-kpi-value,
.expense-donut strong,
.expense-legend-line strong,
.ret-kpi-body strong,
.ret-donut strong,
.cb-kpi__body strong,
.cb-donut__inside strong,
.bb-kpi strong,
.pay-kpi strong,
.pay-donut strong,
.crm-kpi-card strong,
.crm-summary-card strong,
.module-kpi strong,
.sale-summary-card strong,
.purchase-summary-card strong,
.summary-card .summary-line strong,
.grand-total-card strong,
.stock-product-kpi strong,
.finance-doc-amount-card strong,
.shopify-detail-summary .shopify-summary-total strong,
[data-kpi-value] {
  opacity: 0;
  animation: kpi-value-fallback-reveal 0s .65s forwards;
}

.kpi-value-standard {
  opacity: 1 !important;
  animation: none !important;
}

@keyframes kpi-value-fallback-reveal {
  to { opacity: 1; }
}

/* Only a genuinely compacted metric presents the hover affordance. */
.kpi-value-standard[data-kpi-is-compact="1"] {
  cursor: help;
}