/* cignyl-sftp 20260824 */
/* ------------------------------ */
/* v2 Stat                        */
/* ------------------------------ */

.v2-theme .v2-stat {
    display: flex;
    position: relative;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    padding: 1rem 1.25rem;
    width: 100%;
    min-width: 0;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    container-type: inline-size;
    container-name: v2-stat;
}

.v2-theme .v2-stat__body {
    display: flex;
    width: 100%;
    min-width: 0;
}

.v2-theme .v2-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: hsl(var(--muted-foreground));
    font-size: 1.25rem;
    line-height: 1;
}

.v2-theme .v2-stat__number-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.v2-theme .v2-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    white-space: nowrap;
    color: hsl(var(--foreground));
}

.v2-theme .v2-stat__title {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: hsl(var(--muted-foreground));
    min-width: 0;
}

.v2-theme .v2-stat__badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ────────────────────────────────
   Layout: Stacked (default)
   Number row on top, title below, badge top-right
   ──────────────────────────────── */

.v2-theme .v2-stat--layout-stacked .v2-stat__body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.v2-theme .v2-stat--layout-stacked .v2-stat__icon {
    align-self: center;
    margin-bottom: 0;
}

.v2-theme .v2-stat--layout-stacked .v2-stat__number-row {
    flex-direction: row;
    align-items: center;
    min-width: 0;
}

.v2-theme .v2-stat--layout-stacked .v2-stat__title {
    width: 100%;
    margin-top: 0.125rem;
}

.v2-theme .v2-stat--layout-stacked .v2-stat__badge {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
}

/* ────────────────────────────────
   Layout: Inline
   Icon, number, title, badge all on one line
   ──────────────────────────────── */

.v2-theme .v2-stat--layout-inline .v2-stat__body {
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
}

.v2-theme .v2-stat--layout-inline .v2-stat__number-row {
    flex-shrink: 0;
}

.v2-theme .v2-stat--layout-inline .v2-stat__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-theme .v2-stat--layout-inline .v2-stat__badge {
    margin-left: auto;
}

/* ────────────────────────────────
   Layout: Split
   [icon] [title] <-> [badge] [value]
   ──────────────────────────────── */

.v2-theme .v2-stat--layout-split .v2-stat__body {
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
}

.v2-theme .v2-stat--layout-split .v2-stat__title {
    order: 2;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-theme .v2-stat--layout-split .v2-stat__number-row {
    order: 3;
    flex-shrink: 0;
    margin-left: auto;
    flex-direction: row-reverse;
    align-items: center;
}

.v2-theme .v2-stat--layout-split .v2-stat__badge {
    position: static;
    margin-left: 0;
}

/* ────────────────────────────────
   Layout: Featured
   Number large and prominent, title below, badge top-right
   ──────────────────────────────── */

.v2-theme .v2-stat--layout-featured .v2-stat__body {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
}

.v2-theme .v2-stat--layout-featured .v2-stat__icon {
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
}

.v2-theme .v2-stat--layout-featured .v2-stat__value {
    font-size: 2.25rem;
}

.v2-theme .v2-stat--layout-featured .v2-stat__number-row {
    justify-content: center;
}

.v2-theme .v2-stat--layout-featured .v2-stat__badge {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
}

.v2-theme .v2-stat--layout-featured .v2-stat__title {
    font-size: 0.875rem;
}

/* ────────────────────────────────
   Responsive auto-switching
   Uses CSS container queries on v2-stat container
   ──────────────────────────────── */

/* When responsive=true and container is narrow: force stacked layout */
@container v2-stat (max-width: 180px) {
    .v2-theme .v2-stat--responsive-true .v2-stat__body {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem;
    }

    .v2-theme .v2-stat--responsive-true .v2-stat__icon {
        align-self: center;
        margin-bottom: 0;
    }

    .v2-theme .v2-stat--responsive-true .v2-stat__number-row {
        flex-direction: row;
        align-items: center;
        min-width: 0;
    }

    .v2-theme .v2-stat--responsive-true .v2-stat__title {
        width: 100%;
        margin-top: 0.125rem;
        flex: unset;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
        text-align: left;
    }

    .v2-theme .v2-stat--responsive-true .v2-stat__badge {
        position: static;
        margin-left: 0;
    }

    /* Override featured sizing for narrow */
    .v2-theme .v2-stat--responsive-true.v2-stat--layout-featured .v2-stat__body {
        align-items: flex-start;
        text-align: left;
    }

    .v2-theme .v2-stat--responsive-true.v2-stat--layout-featured .v2-stat__value {
        font-size: 1.75rem;
    }

    .v2-theme .v2-stat--responsive-true.v2-stat--layout-featured .v2-stat__number-row {
        justify-content: flex-start;
    }
}

/* ────────────────────────────────
   Sizes
   ──────────────────────────────── */

.v2-theme .v2-stat--size-xsm {
    padding: 0.5rem 0.625rem;
}

.v2-theme .v2-stat--size-xsm .v2-stat__value {
    font-size: 1.125rem;
}

.v2-theme .v2-stat--size-xsm .v2-stat__title {
    font-size: 0.6875rem;
}

.v2-theme .v2-stat--size-xsm .v2-stat__icon {
    font-size: 0.875rem;
}

.v2-theme .v2-stat--size-sm {
    padding: 0.625rem 0.875rem;
}

.v2-theme .v2-stat--size-sm .v2-stat__value {
    font-size: 1.375rem;
}

.v2-theme .v2-stat--size-sm .v2-stat__title {
    font-size: 0.75rem;
}

.v2-theme .v2-stat--size-sm .v2-stat__icon {
    font-size: 1rem;
}

/* size-default is base styles (no override needed) */

.v2-theme .v2-stat--size-lg {
    padding: 1.25rem 1.5rem;
}

.v2-theme .v2-stat--size-lg .v2-stat__value {
    font-size: 2.25rem;
}

.v2-theme .v2-stat--size-lg .v2-stat__title {
    font-size: 0.9375rem;
}

.v2-theme .v2-stat--size-lg .v2-stat__icon {
    font-size: 1.5rem;
}

.v2-theme .v2-stat--size-xlg {
    padding: 1.5rem 1.75rem;
}

.v2-theme .v2-stat--size-xlg .v2-stat__value {
    font-size: 2.75rem;
}

.v2-theme .v2-stat--size-xlg .v2-stat__title {
    font-size: 1rem;
}

.v2-theme .v2-stat--size-xlg .v2-stat__icon {
    font-size: 1.75rem;
}

/* ────────────────────────────────
   Variants
   ──────────────────────────────── */

.v2-theme .v2-stat--variant-default {
    background-color: hsl(var(--card));
    border-color: hsl(var(--border));
}

.v2-theme .v2-stat--variant-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border-color: hsl(var(--border));
}

.v2-theme .v2-stat--variant-secondary .v2-stat__value {
    color: hsl(var(--secondary-foreground));
}

.v2-theme .v2-stat--variant-secondary .v2-stat__title {
    color: hsl(var(--secondary-foreground) / 0.7);
}

.v2-theme .v2-stat--variant-secondary .v2-stat__icon {
    color: hsl(var(--secondary-foreground) / 0.7);
}

.v2-theme .v2-stat--variant-destructive {
    background:
        linear-gradient(0, hsl(var(--destructive) / 0.1), hsl(var(--destructive) / 0.1)),
        hsl(var(--background));
    border-color: hsl(var(--destructive));
}

.v2-theme .v2-stat--variant-destructive .v2-stat__value {
    color: hsl(var(--destructive));
}

.v2-theme .v2-stat--variant-destructive .v2-stat__title {
    color: hsl(var(--destructive));
}

.v2-theme .v2-stat--variant-destructive .v2-stat__icon {
    color: hsl(var(--destructive));
}

.v2-theme .v2-stat--variant-success {
    background:
        linear-gradient(0, hsl(var(--success) / 0.1), hsl(var(--success) / 0.1)),
        hsl(var(--background));
    border-color: hsl(var(--success));
}

.v2-theme .v2-stat--variant-success .v2-stat__value {
    color: hsl(var(--success));
}

.v2-theme .v2-stat--variant-success .v2-stat__title {
    color: hsl(var(--success));
}

.v2-theme .v2-stat--variant-success .v2-stat__icon {
    color: hsl(var(--success));
}

.v2-theme .v2-stat--variant-warning {
    background:
        linear-gradient(0, hsl(var(--warning) / 0.1), hsl(var(--warning) / 0.1)),
        hsl(var(--background));
    border-color: hsl(var(--warning));
}

.v2-theme .v2-stat--variant-warning .v2-stat__value {
    color: hsl(var(--warning));
}

.v2-theme .v2-stat--variant-warning .v2-stat__title {
    color: hsl(var(--warning));
}

.v2-theme .v2-stat--variant-warning .v2-stat__icon {
    color: hsl(var(--warning));
}

.v2-theme .v2-stat--variant-info {
    background:
        linear-gradient(0, hsl(var(--info) / 0.1), hsl(var(--info) / 0.1)),
        hsl(var(--background));
    border-color: hsl(var(--info));
}

.v2-theme .v2-stat--variant-info .v2-stat__value {
    color: hsl(var(--info));
}

.v2-theme .v2-stat--variant-info .v2-stat__title {
    color: hsl(var(--info));
}

.v2-theme .v2-stat--variant-info .v2-stat__icon {
    color: hsl(var(--info));
}

.v2-theme .v2-stat--variant-outline {
    background-color: transparent;
    border-color: hsl(var(--border));
}

.v2-theme .v2-stat--variant-ghost {
    background-color: transparent;
    border-color: transparent;
}

.v2-theme .v2-stat--variant-link {
    background-color: transparent;
    border-color: transparent;
}

.v2-theme .v2-stat--variant-link .v2-stat__value {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ────────────────────────────────
   Clickable / Disabled
   ──────────────────────────────── */

.v2-theme .v2-stat--clickable-true {
    cursor: pointer;
}

.v2-theme .v2-stat--clickable-true:hover {
    border-color: hsl(var(--primary) / 0.4);
    box-shadow: 0 1px 3px 0 hsl(var(--primary) / 0.08);
}

.v2-theme .v2-stat--clickable-true:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.v2-theme .v2-stat--disabled-true {
    opacity: 0.5;
    pointer-events: none;
}

/* ────────────────────────────────
   Hidden utility
   ──────────────────────────────── */

.v2-theme .v2-stat [data-v2-hidden="true"] {
    display: none !important;
}
