/* ============================================================================
   STAT CARDS
   Consolidated from theme-override.css (app layer). No vendor (theme.css) or
   bootstrap.min.css rules touch these selectors, so this file is the only
   definition.
   Values are the resolved cascade result as of the consolidation — no
   intended visual change. Colour variants are driven by custom properties
   set on the variant class and consumed by one shared rule.

   Markup that renders these classes:
     - templates/home.html (.stat-card, .stat-icon + tint, .stat-label,
       .stat-label-main; also builds .stat-icon.stat-icon-blue in jQuery)
     - pbx/templates/pbx/voicemail/message_list.html (.stat-value too)
     - smartgate/templates/smartgate/home.html (.stat-card-accent + a
       .stat-accent-<hue>)
     - navigation/_render.py HOME_TILE_TINTS supplies the .stat-icon-<tint>
       suffix rendered by home.html: blue, green, purple, orange, red.
   ============================================================================ */

/* A stat tile is a card, so it takes the sheet fill every other .card takes
   rather than a surface wash: a wash is a step *away from* the page in
   whichever direction the theme runs, which on light put the tile below the
   canvas and made it read as a hole instead of a tile. */
.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: all 0.2s ease;
    text-decoration: none;
    /* Bookends: the icon holds one edge, the readout the other, each aligned
       toward its own edge. .stat-card-icon-end mirrors the pair. */
    text-align: right;
}

/* .stat-label is its own flex row, so its parts need pushing too. */
.stat-card .stat-label {
    justify-content: flex-end;
}

.stat-card:hover {
    background: var(--card-hover-bg), var(--surface-0);
    border-color: var(--border-normal);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Tinted card variants. One shared rule reads --stat-card-rgb; each variant
   only names its palette. Declared after .stat-card so the tint fill wins at
   equal specificity, exactly as the original source order did. .stat-card:hover
   is more specific, so hover still flattens back to --surface-2. */
.stat-card-primary,
.stat-card-danger,
.stat-card-warning,
.stat-card-success,
.stat-card-info,
.stat-card-secondary {
    background: linear-gradient(
        135deg,
        rgba(var(--stat-card-rgb), 0.15),
        rgba(var(--stat-card-rgb), 0.08)
    );
    border-color: rgba(var(--stat-card-rgb), 0.4);
}

.stat-card-primary { --stat-card-rgb: var(--bs-primary-rgb); }
.stat-card-danger { --stat-card-rgb: var(--bs-danger-rgb); }
.stat-card-warning { --stat-card-rgb: var(--bs-warning-rgb); }
.stat-card-success { --stat-card-rgb: var(--bs-success-rgb); }
/* No usage anywhere in templates or Python as of this consolidation; carried
   over verbatim to complete the variant set. */
.stat-card-info { --stat-card-rgb: var(--bs-info-rgb); }
.stat-card-secondary { --stat-card-rgb: var(--bs-secondary-rgb); }

/* --------------------------- MIRRORED LAYOUT ------------------------------ */

/* The other of the two layouts: icon on the right, readout left-aligned at
   the left edge. Everything that has a side to it flips with it. */
.stat-card-icon-end {
    flex-direction: row-reverse;
    text-align: left;
}

.stat-card-icon-end .stat-label {
    justify-content: flex-start;
}

/* --------------------------- ACCENT TILE MODIFIER -------------------------- */

/* An accent tile keeps the card fill and marks itself with colour at the
   edges instead: a hairline along the top, and nothing else. Quieter than
   the .stat-card-<semantic> variants, which fill the whole tile.

   Pick the hue with .stat-accent-<name>; the .stat-icon inside inherits it,
   so no .stat-icon-<tint> class is needed alongside. */
.stat-card-accent {
    --stat-accent-rgb: var(--text-tertiary-rgb);
    /* Runs away from the icon, so it flips with the layout. */
    --stat-accent-dir: to left;
    position: relative;
    overflow: hidden;
}

/* Needs both classes: a lone .stat-card-icon-end would lose to
   .stat-card-accent above on source order at equal specificity. */
.stat-card-accent.stat-card-icon-end {
    --stat-accent-dir: to right;
}

/* Top edge only — it never turns the corner. The card's overflow clip ends
   it along the curve, and the peak sits a little inboard of the corner so
   what gets clipped is already off full strength; the line then tapers the
   width of the card down to a trace over the icon. Its weight is a theme
   token — the light theme's deeper hues lay down far more ink per unit of
   alpha. */
.stat-card-accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 0 0 2px 2px;
    pointer-events: none;
    background: linear-gradient(
        var(--stat-accent-dir),
        rgba(var(--stat-accent-rgb), calc(var(--stat-accent-alpha) * 0.55)) 0%,
        rgba(var(--stat-accent-rgb), var(--stat-accent-alpha)) 7%,
        rgba(var(--stat-accent-rgb), calc(var(--stat-accent-alpha) * 0.5)) 40%,
        rgba(var(--stat-accent-rgb), calc(var(--stat-accent-alpha) * 0.2)) 70%,
        rgba(var(--stat-accent-rgb), calc(var(--stat-accent-alpha) * 0.06)) 100%
    );
}

/* Declared after .stat-card:hover so the accent edge wins at equal
   specificity; the lift and hover fill still come from the base rule. */
.stat-card-accent:hover {
    border-color: rgba(var(--stat-accent-rgb), 0.45);
    box-shadow: var(--card-hover-shadow);
}

.stat-card-accent .stat-icon {
    --stat-icon-rgb: var(--stat-accent-rgb);
    --stat-icon-color: rgb(var(--stat-accent-rgb));
}

.stat-accent-blue { --stat-accent-rgb: var(--color-blue-rgb); }
.stat-accent-green { --stat-accent-rgb: var(--color-green-rgb); }
.stat-accent-purple { --stat-accent-rgb: var(--color-purple-rgb); }
.stat-accent-teal { --stat-accent-rgb: var(--color-teal-rgb); }

/* ------------------------------- STAT ICONS ------------------------------- */

.stat-icon {
    --stat-icon-rgb: var(--bs-primary-rgb);
    --stat-icon-color: var(--bs-primary);
    --stat-icon-bg-start-alpha: 0.25;
    --stat-icon-bg-end-alpha: 0.15;
    --stat-icon-border-alpha: 0.4;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.125rem;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border: 1px solid rgba(var(--stat-icon-rgb), var(--stat-icon-border-alpha));
    background: linear-gradient(
        135deg,
        rgba(var(--stat-icon-rgb), var(--stat-icon-bg-start-alpha)),
        rgba(var(--stat-icon-rgb), var(--stat-icon-bg-end-alpha))
    );
    color: var(--stat-icon-color);
}

/* The mdi glyphs hang high in their em box next to the Font Awesome set, so
   flex centring lands them above the optical centre of the tile. */
.stat-icon > .mdi {
    position: relative;
    top: 2px;
}

.stat-icon-purple {
    --stat-icon-rgb: var(--bs-info-rgb);
    --stat-icon-color: var(--bs-info);
}

.stat-icon-blue {
    --stat-icon-rgb: var(--bs-primary-rgb);
    --stat-icon-color: var(--bs-primary);
}

.stat-icon-green {
    --stat-icon-rgb: var(--bs-success-rgb);
    --stat-icon-color: var(--bs-success);
}

.stat-icon-orange {
    --stat-icon-rgb: var(--bs-warning-rgb);
    --stat-icon-color: var(--bs-warning);
}

.stat-icon-red {
    --stat-icon-rgb: var(--bs-danger-rgb);
    --stat-icon-color: var(--bs-danger);
}

/* -------------------------------- STAT TEXT ------------------------------- */

/* The big number inside a .stat-card. Pair with .tabular-nums. */
.stat-value {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

.stat-label {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    width: 100%;
    overflow: hidden;
    line-height: 1.1;
}

.stat-label-main {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stat-subscript {
    flex: 0 0 auto;
    font-size: 0.65rem;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0.7;
    white-space: nowrap;
}