/*
 * zcore — subscriptions page
 * full-width list layout. one row per subscription, stacked vertically.
 * left half of every row carries the game banner as a background image
 * that fades to transparent around the midpoint; a logo + name + plan
 * label sit on top of that fade. the right half packs the detail cells
 * inline (days-left, active config, module version, last inject) so
 * nothing needs to be expanded — every relevant fact for a sub is
 * visible at a glance.
 */


/* ── page toolbar ─────────────────────────────────────────────────── */
.subs-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-bottom: var(--sp-4);
}

.settings-tab .subs-pill-count {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--bg-input);
    color: var(--text-dim);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    line-height: 14px;
    vertical-align: 1px;
}
.settings-tab.active .subs-pill-count {
    background: rgba(0, 0, 0, 0.2);
    color: var(--bg);
}


/* ── stack: simple vertical list, full width per row ─────────────── */
.subs-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sub-card-error {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-dim);
}


/* ── the list row itself ──────────────────────────────────────────── */
.sub-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 32%) 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 0;
    min-height: 88px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}
.sub-row:hover {
    border-color: var(--border-strong);
}
.sub-row.is-active    { border-left: 3px solid var(--success); }
.sub-row.is-pending   { border-left: 3px solid var(--warning); }
.sub-row.is-expired   { border-left: 3px solid var(--danger); opacity: 0.85; }
.sub-row.is-cancelled,
.sub-row.is-rejected  { border-left: 3px solid var(--text-dim); opacity: 0.75; }


/* banner layer: absolutely positioned, pinned to the left half and
   masked so its right edge fades to transparent. makes the card feel
   like the game's artwork is peeking out from under the identity
   block without dominating the whole row. */
.sub-row-banner {
    position: absolute;
    inset: 0 0 0 0;
    width: 55%;
    background-size: cover;
    background-position: center;
    opacity: 0.42;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 100%);
}
.sub-row.is-expired .sub-row-banner,
.sub-row.is-cancelled .sub-row-banner,
.sub-row.is-rejected .sub-row-banner { filter: grayscale(0.7); opacity: 0.22; }


/* LEFT block: logo + name + plan. sits on top of the banner fade */
.sub-row-identity {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0 14px 18px;
    min-width: 0;
}
.sub-row-logo,
.sub-row-logo-ph {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    flex-shrink: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    object-fit: contain;
}
.sub-row-logo-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--fs-h2);
    font-weight: var(--fw-semi);
    color: var(--text-dim);
}

.sub-row-identity-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.sub-row-name {
    margin: 0;
    font-family: var(--font-main);
    font-size: var(--fs-content);
    font-weight: var(--fw-semi);
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sub-row-plan {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semi);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}


/* MIDDLE block: info cells strip — one short label + value column per
   stat. keeps the row to a single line on desktop and wraps to two
   lines on narrower viewports. */
.sub-row-info {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px 18px;
    padding: 10px 0;
    min-width: 0;
}
.sub-info-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sub-info-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-tracked);
    color: var(--text-dim);
}
.sub-info-label .sub-info-label-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
    background: var(--warning);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
.sub-info-value {
    font-size: var(--fs-body);
    font-weight: var(--fw-semi);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sub-info-value.mono { font-family: var(--font-mono); }
.sub-info-value.is-success { color: var(--success); }
.sub-info-value.is-warning { color: var(--warning); }
.sub-info-value.is-danger  { color: var(--danger); }
.sub-info-value.is-dim     { color: var(--text-dim); font-weight: var(--fw-normal); }
.sub-info-sub {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sub-info-sub a {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px dashed var(--border);
}
.sub-info-sub a:hover { color: var(--text); border-bottom-color: var(--border-strong); }

/* days-left cell shows a thin progress bar under the number */
.sub-info-bar {
    height: 3px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 2px;
}
.sub-info-bar-fill {
    height: 100%;
    background: var(--success);
    border-radius: 2px;
    transition: width 0.7s var(--ease);
}
.sub-info-bar-fill.is-warning { background: var(--warning); }
.sub-info-bar-fill.is-danger  { background: var(--danger); }


/* RIGHT block: action buttons + status badges */
.sub-row-end {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 12px 4px;
}
.sub-row-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    margin-right: 6px;
}
.sub-row-actions {
    display: flex;
    gap: 6px;
}
.sub-row-actions .btn { min-width: 82px; justify-content: center; }

/* injectable badge scaled down so it sits well with the status pill */
.sub-row-badges .badge-injectable {
    font-size: var(--fs-xs);
}


/* ── pending variant: replace the info cells with a single clock row */
.sub-row.is-pending .sub-row-info { grid-template-columns: 1fr; }
.sub-pending-note {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--warning);
}
.sub-pending-note i { color: var(--warning); }
.sub-pending-note .sub-pending-note-timer { color: var(--text-dim); }


/* ── banners (expiring / pending) ─────────────────────────────────── */
.subs-pending-banner {
    display: none;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-left: 3px solid var(--warning);
    background: rgba(234, 179, 8, 0.06);
    border-radius: var(--radius);
}
.subs-pending-banner.visible { display: flex; }
.subs-pending-banner-text { flex: 1 1 auto; font-size: var(--fs-label); }
.subs-pending-summary { margin-left: 8px; }
.subs-pending-banner-link {
    color: inherit;
    border-bottom: 1px dashed var(--border);
    text-decoration: none;
}
.subs-pending-banner-link-muted { color: var(--text-muted); }


/* ── empty-state ──────────────────────────────────────────────────── */
.subs-empty {
    padding: 40px 20px;
    text-align: center;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.subs-empty-msg {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    margin-bottom: 16px;
}


/* ── responsive breakdown ─────────────────────────────────────────── */
@media (max-width: 960px) {
    .sub-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .sub-row-banner {
        width: 100%;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
    }
    .sub-row-identity {
        padding: 14px 18px 8px;
    }
    .sub-row-info {
        padding: 4px 18px 10px;
        grid-template-columns: repeat(2, 1fr);
    }
    .sub-row-end {
        padding: 0 18px 14px;
        justify-content: flex-end;
        width: 100%;
    }
}