/* 04_VISUAL/xwui/xwui-lib/xwui-lib-basic/src/charts/XWUIDisplayStatistic/XWUIDisplayStatistic.css */
/**
 * XWUIDisplayStatistic Component Styles
 */

.xwui-statistic-container {
    /* Container has no specific styles */
}

.xwui-statistic {
    display: inline-block;
}

.xwui-statistic-title {
    font-size: var(--font-size-sm, 14px);
    color: var(--text-secondary, #666);
    margin-block-end: var(--spacing-xs, 4px);
    letter-spacing: -0.01em;
}

/* Letter-spacing pulls the joined letters of Arabic apart. Two rules, not one
   selector list: a browser without :dir() would drop a whole list. */
.xwui-statistic-title:dir(rtl) {
    letter-spacing: normal;
}

.xwui-statistic-title:lang(ar) {
    letter-spacing: normal;
}

.xwui-statistic-content {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs, 4px);
}

.xwui-statistic-value {
    font-size: 24px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #333);
    line-height: 1;
}

.xwui-statistic-prefix,
.xwui-statistic-suffix {
    font-size: var(--font-size-base, 16px);
    color: var(--text-secondary, #666);
}

/* A missing value: the placeholder must read as "absent", never as a figure. */
.xwui-statistic-value--empty {
    color: var(--text-secondary, #666);
}

/* Announced, not shown: says what the aria-hidden placeholder means. Owned
   here so the empty state does not depend on a global utility stylesheet. */
.xwui-statistic-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* KPI parts under the figure: change + period, trend, footnote, status.
   Logical properties only, so the tile mirrors in RTL. */
.xwui-statistic-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-xs, 4px);
    margin-block-start: var(--spacing-xs, 4px);
    font-size: var(--font-size-sm, 14px);
    color: var(--text-secondary, #666);
}

.xwui-statistic-delta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2em;
    font-weight: var(--font-weight-medium, 500);
}

/* The status accents are fill colours (the default success green is about
   2.5:1 on white), so as TEXT they are mixed toward the theme's own text
   colour: legible on light and dark surfaces alike. The sign and arrow carry
   the direction; colour only adds good/bad. */
.xwui-statistic-delta--good {
    color: color-mix(in srgb, var(--accent-success, var(--text-secondary, #666)) 55%, var(--text-primary, #333));
}

.xwui-statistic-delta--bad {
    color: color-mix(in srgb, var(--accent-error, var(--text-secondary, #666)) 55%, var(--text-primary, #333));
}

.xwui-statistic-delta-arrow {
    font-size: 0.75em;
}

.xwui-statistic-trend {
    margin-block-start: var(--spacing-xs, 4px);
    line-height: 0;
}

.xwui-statistic-footnote,
.xwui-statistic-status {
    margin-block-start: var(--spacing-xs, 4px);
    font-size: var(--font-size-xs, 12px);
    color: var(--text-secondary, #666);
}

.xwui-statistic-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 4px);
}

.xwui-statistic-status--error .xwui-statistic-status-message {
    color: color-mix(in srgb, var(--accent-error, var(--text-secondary, #666)) 55%, var(--text-primary, #333));
    font-weight: var(--font-weight-medium, 500);
}

/* Elevated surface (`surface: 'elevated'`) - the same shadow/background/radius
   token scale XWUICard's elevated variant uses, owned HERE so a KPI figure
   never has to borrow .xwui-card-elevated from another component's stylesheet
   (which only works when that component happens to be loaded). */
.xwui-statistic--elevated {
    background: var(--bg-card, var(--bg-primary, #ffffff));
    border-radius: var(--radius-container, var(--radius-lg, 12px));
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    padding: var(--spacing-lg, 16px) var(--spacing-xl, 20px);
}

/* Compact mode - tightened typography for dense card / sidebar layouts. */
.xwui-statistic--compact {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    font-size: 0.88rem;
}
/* The title keeps the secondary text colour: --text-tertiary is under 4.5:1 on
   a light surface, and this title is 12px. */
.xwui-statistic--compact .xwui-statistic-title {
    font-size: 0.75rem;
    font-weight: 500;
    margin-block-end: var(--spacing-xs, 2px);
}
.xwui-statistic--compact .xwui-statistic-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
}
.xwui-statistic--compact .xwui-statistic-prefix,
.xwui-statistic--compact .xwui-statistic-suffix {
    font-size: 0.85rem;
}

/* Size scale (`size`): every step on the --font-size-* tokens, so a theme or
   density change moves the figure (the sm and lg steps used to be rem
   literals). md is the default above and adds no class. XWUIStatistic.css
   carries the SAME block - both stylesheets style `.xwui-statistic`, so a
   difference would let whichever loads last decide the size; a test pins it. */
.xwui-statistic--sm .xwui-statistic-title { font-size: var(--font-size-xs, 0.75rem); }
.xwui-statistic--sm .xwui-statistic-value { font-size: var(--font-size-lg, 1.125rem); font-weight: 600; }
.xwui-statistic--lg .xwui-statistic-title { font-size: var(--font-size-base, 1rem); }
.xwui-statistic--lg .xwui-statistic-value { font-size: var(--font-size-3xl, 1.875rem); font-weight: 600; }
.xwui-statistic--xl .xwui-statistic-title { font-size: var(--font-size-lg, 1.125rem); }
.xwui-statistic--xl .xwui-statistic-value { font-size: var(--font-size-4xl, 2.25rem); font-weight: 700; }
.xwui-statistic--2xl .xwui-statistic-title { font-size: var(--font-size-xl, 1.25rem); }
.xwui-statistic--2xl .xwui-statistic-value { font-size: calc(var(--font-size-4xl, 2.25rem) * 1.35); font-weight: 800; }