/* ============================================================================================
   TSL Premium page system — shared design language for tracker/event analytics pages.
   Cloned 1:1 from the approved Digital Card Exchanger look (dcx-*) so every dashboard matches.
   Usage: <link rel="stylesheet" href="~/assets/css/tsl-premium.css" /> then tslp-* classes.
   ============================================================================================ */

.tslp-page { color: #172033; }

.tslp-shell { display: grid; gap: 1.15rem; }

.tslp-hero,
.tslp-panel,
.tslp-stat,
.tslp-mini-panel {
    background: #ffffff;
    border: 1px solid #e8edf5;
    box-shadow: 0 14px 34px rgba(16, 24, 40, .07);
}

.tslp-hero { border-radius: 8px; overflow: hidden; }

/* Top breathing room so the hero isn't flush against the top nav (matches the left/right page gutter).
   Applies to the leading hero on a page whether or not the wrapper carries .tslp-page; the now-removed
   breadcrumb used to provide this gap. */
.tslp-page > .container-fluid > .tslp-hero:first-child,
.tslp-page > .tslp-hero:first-child,
.container-fluid > .tslp-hero:first-child,
.main-content > .tslp-hero:first-child { margin-top: 1.25rem; }

.tslp-hero-band {
    background: linear-gradient(135deg, #18233f 0%, #2563eb 52%, #14b8a6 100%);
    padding: 1.45rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.tslp-hero h1 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0;
    color: #ffffff;
}

.tslp-hero-meta { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .75rem; }

.tslp-hero-meta .badge {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .24);
}

.tslp-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- PageHeader colour variants (chosen by action type: list/create/edit/view/delete/dashboard/report).
   list & default keep the base blue->teal band defined on .tslp-hero-band above. --- */
.tslp-hero--create .tslp-hero-band    { background: linear-gradient(135deg, #065f46 0%, #059669 52%, #10b981 100%); }
.tslp-hero--edit .tslp-hero-band      { background: linear-gradient(135deg, #1e3a8a 0%, #4338ca 52%, #6366f1 100%); }
.tslp-hero--view .tslp-hero-band      { background: linear-gradient(135deg, #0f172a 0%, #334155 52%, #0ea5e9 100%); }
.tslp-hero--delete .tslp-hero-band    { background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 52%, #fb7185 100%); }
.tslp-hero--dashboard .tslp-hero-band { background: linear-gradient(135deg, #312e81 0%, #6d28d9 52%, #8b5cf6 100%); }
.tslp-hero--report .tslp-hero-band    { background: linear-gradient(135deg, #134e4a 0%, #0d9488 52%, #06b6d4 100%); }

/* Clickable breadcrumb trail + subtitle rendered inside the hero band. */
.tslp-hero-crumbs { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .4rem; font-size: .78rem; }
.tslp-crumb { color: rgba(255, 255, 255, .8); text-decoration: none; }
.tslp-crumb:hover { color: #fff; text-decoration: underline; }
.tslp-crumb.is-active { color: #fff; font-weight: 600; }
.tslp-crumb-sep { color: rgba(255, 255, 255, .45); }
.tslp-hero-sub { color: rgba(255, 255, 255, .85); margin-top: .35rem; font-size: .9rem; }

.tslp-hero-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    padding: 1rem;
}

@media (max-width: 1199px) { .tslp-hero-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .tslp-hero-body { grid-template-columns: 1fr; } }

.tslp-stat { border-radius: 8px; padding: 1rem; min-height: 112px; }

.tslp-stat-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #667085;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.tslp-stat-value { font-size: 1.55rem; font-weight: 800; margin-top: .65rem; color: #172033; }

.tslp-stat-foot { color: #667085; font-size: .78rem; margin-top: .2rem; }

.tslp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(350px, .55fr);
    gap: 1.15rem;
    align-items: start;
}

@media (max-width: 1199px) { .tslp-grid { grid-template-columns: 1fr; } }

.tslp-stack { display: grid; gap: 1.15rem; }

.tslp-panel { border-radius: 8px; overflow: hidden; }

.tslp-panel-header {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #edf1f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .85rem;
}

.tslp-panel-title {
    margin: 0;
    font-size: .98rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.tslp-panel-body { padding: 1.15rem; }

.tslp-chart { min-height: 300px; }

.tslp-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }

.tslp-field-label {
    color: #667085;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: .25rem;
}

.tslp-field-value { color: #172033; font-weight: 600; overflow-wrap: anywhere; }

.tslp-table { margin: 0; vertical-align: middle; }

.tslp-table thead th {
    border-bottom: 1px solid #e7edf6;
    color: #667085;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: .85rem 1rem;
}

.tslp-table tbody td { border-color: #eef2f7; padding: .9rem 1rem; }

.tslp-person { display: flex; align-items: center; gap: .65rem; }

.tslp-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    flex: 0 0 auto;
}

.tslp-chip-row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.tslp-mini-panel { border-radius: 8px; padding: 1rem; }

.tslp-progress-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; }
.tslp-progress-row .label { color: #667085; font-size: .78rem; font-weight: 700; }
.tslp-progress-row .value { font-weight: 800; font-size: .85rem; }

.tslp-empty {
    text-align: center;
    color: #667085;
    padding: 2.5rem 1rem;
}
.tslp-empty i { font-size: 1.6rem; display: block; margin-bottom: .5rem; }

/* Premium segmented tab bar — pills matching the tslp panel language.
   Markup: <ul class="nav tslp-tabs" role="tablist"> with data-bs-toggle="tab" links
   (Bootstrap tab JS mechanics unchanged; it only toggles .active on .nav-link). */
.tslp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    background: #ffffff;
    border: 1px solid #e8edf5;
    box-shadow: 0 14px 34px rgba(16, 24, 40, .07);
    border-radius: 8px;
    padding: .45rem;
}

.tslp-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    border-radius: 6px;
    padding: .5rem .85rem;
    color: #667085;
    font-size: .82rem;
    font-weight: 700;
    background: transparent;
}

.tslp-tabs .nav-link:hover { color: #172033; background: #f1f5fb; }

.tslp-tabs .nav-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    box-shadow: 0 6px 14px rgba(37, 99, 235, .25);
}

/* 5-tile hero variant for pages with five headline KPIs (base grid is 4 columns). */
.tslp-hero-body.tslp-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1399px) { .tslp-hero-body.tslp-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .tslp-hero-body.tslp-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .tslp-hero-body.tslp-cols-5 { grid-template-columns: 1fr; } }

/* ============================================================================================
   Tabbed premium record pages (Company/Contact details) — count pills in tab labels, sticky
   tab bar, compliance ribbon and skeletons for lazily-loaded panes. Mechanics: js/tslp-tabs.js.
   ============================================================================================ */

/* Count pill inside a tslp-tabs label: <a class="nav-link">Contacts <span class="tslp-tab-count">12</span></a> */
.tslp-tab-count {
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.2;
    border-radius: 999px;
    padding: .1rem .45rem;
    background: #eef2f7;
    color: #667085;
    transition: background-color .15s ease, color .15s ease;
}
.tslp-tabs .nav-link.active .tslp-tab-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* Sticky tab bar: --tslp-sticky-top is measured from the fixed .app-header at runtime by
   tslp-tabs.js (the theme exposes no header-height variable), with a safe rem fallback. */
.tslp-tabs--sticky {
    position: sticky;
    top: calc(var(--tslp-sticky-top, 4rem) + .5rem);
    z-index: 5;
}

/* Keyboard a11y: the pill bar previously had no visible focus state. */
.tslp-tabs .nav-link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Hero variant that hosts flyouts (e.g. a "More" actions dropdown): the base hero clips its
   children (overflow hidden for the gradient band's corners), which would clip a dropdown-menu.
   Round the band itself instead so menus can escape while the look stays identical. */
.tslp-hero--flyout { overflow: visible; }
.tslp-hero--flyout .tslp-hero-band { border-radius: 8px 8px 0 0; }

/* Full-width compliance ribbon (e.g. Do-Not-Contact) — must stay visible on every tab. */
.tslp-dnc-ribbon {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    padding: .7rem 1rem;
    color: #7f1d1d;
    font-weight: 600;
}
.tslp-dnc-ribbon i { color: #dc2626; font-size: 1.15rem; }
.tslp-dnc-ribbon .btn { margin-left: auto; flex: 0 0 auto; }

/* Skeleton shimmer shown while a lazy tab pane fetches (same technique as email-app.css). */
.tslp-skeleton {
    position: relative;
    overflow: hidden;
    background: #eef2f7;
    border-radius: .35rem;
}
.tslp-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .10), transparent);
    animation: tslpSkeletonShimmer 1.25s ease-in-out infinite;
}
@keyframes tslpSkeletonShimmer {
    100% { transform: translateX(100%); }
}
.tslp-skeleton-row { height: 3.75rem; margin-bottom: .5rem; }

/* ============================================================================================
   Client-table idiom (search + sort + paging) — house standard for data tables.
   Markup contract + shared mechanics: wwwroot/js/wf-client-table.js (extracted from the
   Workforce v2.1 lists so the per-view <style> copies are no longer needed).
   ============================================================================================ */
.sortable-client { cursor: pointer; user-select: none; }
.sortable-client::after { content: '\2195'; opacity: .3; margin-left: 5px; font-size: .8em; }
.sortable-client.asc::after { content: '\2191'; opacity: 1; }
.sortable-client.desc::after { content: '\2193'; opacity: 1; }
.wf-search { max-width: 260px; }

/* ============================================================================================
   Campaign AI insights (cai-*) — the "AI insights for this campaign" card on Campaign details
   (Areas/Campaigns/Views/Campaign/CampaignDetails/CampaignAiInsightsPartial.cshtml). Moved out
   of the partial's inline <style> during the campaign-details rewrite so it caches with the
   stylesheet.
   ============================================================================================ */
.cai-card { margin-bottom: 1rem; }
.cai-head { background: linear-gradient(135deg, #18233f 0%, #2563eb 52%, #14b8a6 100%); color: #fff; border-bottom: 0; }
.cai-head .card-title { color: #fff; }
.cai-head small { color: rgba(255,255,255,.82); }
.cai-row { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-end; }
.cai-field { display: flex; flex-direction: column; gap: .35rem; }
.cai-field > label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #667085; }
.cai-est { background: #f8fafc; border: 1px solid #e8edf5; border-radius: 8px; padding: .7rem .9rem; font-size: .9rem; min-height: 44px; display: flex; align-items: center; }

/* Summary stat strip above the saved list. */
.cai-stats { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; }
.cai-stat { display: flex; flex-direction: column; line-height: 1.1; }
.cai-stat-n { font-size: 1.25rem; font-weight: 800; color: #172033; }
.cai-stat-l { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #94a3b8; margin-top: .15rem; }

/* Saved insight rows — premium card, left accent by risk, headline callout. */
.cai-insight { position: relative; border: 1px solid #e8edf5; border-radius: 10px; padding: .8rem .95rem .8rem 1.05rem; margin-bottom: .65rem; background: #fff; transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease; overflow: hidden; }
.cai-insight::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #cbd5e1; }
.cai-insight.is-success::before { background: #10b981; }
.cai-insight.is-warning::before { background: #f59e0b; }
.cai-insight.is-danger::before  { background: #ef4444; }
.cai-insight.is-secondary::before { background: #94a3b8; }
.cai-insight:hover { box-shadow: 0 10px 24px rgba(16,24,40,.08); transform: translateY(-1px); border-color: #dbe4f3; }

/* Risk pill — shared language with the entity panel. */
.cai-pill { display: inline-flex; align-items: center; gap: .38rem; font-weight: 700; font-size: .76rem; border-radius: 999px; padding: .22rem .6rem; }
.cai-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.cai-pill.is-success { background: #e6f6ef; color: #047857; } .cai-pill.is-success .dot { background: #10b981; }
.cai-pill.is-warning { background: #fdf3e2; color: #b45309; } .cai-pill.is-warning .dot { background: #f59e0b; }
.cai-pill.is-danger  { background: #fdeaea; color: #b91c1c; } .cai-pill.is-danger  .dot { background: #ef4444; }
.cai-pill.is-secondary { background: #eef2f7; color: #475569; } .cai-pill.is-secondary .dot { background: #94a3b8; }

.cai-score { font-size: .72rem; font-weight: 700; color: #94a3b8; }
.cai-insight .cai-action { display: flex; align-items: flex-start; gap: .45rem; font-weight: 600; color: #1e293b; margin-top: .5rem; font-size: .88rem; }

/* Campaign selling-state card (feature 0003) — same visual language as the entity AI panel. */
.cai-ss-state { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .82rem; border-radius: 999px; padding: .3rem .7rem; background: #e4f1fd; color: #1d4ed8; }
.cai-ss-state .dot { width: 8px; height: 8px; border-radius: 50%; background: #2563eb; }
.cai-ss-summary { color: #334155; font-size: .9rem; line-height: 1.5; margin: .6rem 0 .5rem; }
.cai-ss-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #667085; margin: .6rem 0 .35rem; }
.cai-ss-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .4rem; }
.cai-ss-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: #334155; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: .45rem .6rem; }
.cai-ss-list li > i { color: #f59e0b; margin-top: .12rem; }
.cai-ss-list.is-neutral li > i { color: #2563eb; }
.cai-ss-list.is-danger li > i { color: #ef4444; }
.cai-ss-next { display: flex; align-items: flex-start; gap: .65rem; background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(20,184,166,.06)); border: 1px solid #dbe7fb; border-left: 3px solid #2563eb; border-radius: 9px; padding: .7rem .85rem; margin: .6rem 0; }
.cai-ss-next .ico { width: 30px; height: 30px; min-width: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #2563eb, #14b8a6); font-size: 1rem; }
.cai-ss-next .lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #2563eb; }
.cai-ss-next ol { margin: .25rem 0 0 1.05rem; padding: 0; }
.cai-ss-next ol li { color: #1e293b; font-size: .88rem; line-height: 1.5; }
.cai-ss-charged { color: #94a3b8; font-size: .76rem; margin-top: .4rem; }
.cai-ss-charged i { color: #10b981; }

/* ============================================================================================
   Campaign details rewrite — activity feed list items + chunk-reveal helpers (tslp-chunk-*).
   Mechanics: wwwroot/js/tslp-chunk-reveal.js.
   ============================================================================================ */
/* The chunk reveal hides items via the hidden attribute; author display rules (e.g. the flex
   feed items below) would beat the UA [hidden] style without this. */
[data-chunk-item][hidden] { display: none !important; }
.tslp-feed { list-style: none; margin: 0; padding: 0; }
.tslp-feed-item { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .35rem; border-bottom: 1px solid #eef2f7; }
.tslp-feed-item:last-child { border-bottom: 0; }
.tslp-feed-ico { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; background: #eef4fe; color: #2563eb; }
.tslp-feed-item.is-call .tslp-feed-ico { background: #e6f6ef; color: #047857; }
.tslp-feed-item.is-email .tslp-feed-ico { background: #eef4fe; color: #1d4ed8; }
.tslp-feed-item.is-sms .tslp-feed-ico { background: #fdf3e2; color: #b45309; }
.tslp-feed-item.is-other .tslp-feed-ico { background: #eef2f7; color: #475569; }
.tslp-feed-title { font-weight: 600; color: #1e293b; font-size: .9rem; }
.tslp-feed-meta { color: #94a3b8; font-size: .76rem; }

/* ============================================================================
   CREDIT BADGES + CREDIT MODAL (epic 0042)
   Small live balance pill on every charged feature; opens the shared modal with
   usage, purchase packages + expiry, and a top-up route. Desktop + mobile.
   ========================================================================== */
.tslp-credit-badges { display: inline-flex; flex-wrap: wrap; gap: .375rem; vertical-align: middle; }

.tslp-credit-badge {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .25rem .625rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.4;
    border: 1px solid rgba(var(--primary-rgb), .18);
    background: rgba(var(--primary-rgb), .07); color: var(--primary-color);
    cursor: pointer; position: relative; white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tslp-credit-badge:hover { transform: translateY(-1px); box-shadow: 0 .25rem .75rem rgba(0,0,0,.10); background: rgba(var(--primary-rgb), .12); }
.tslp-credit-badge:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.tslp-credit-badge i { font-size: .875rem; line-height: 1; }
.tslp-credit-badge-value { font-variant-numeric: tabular-nums; }
.tslp-credit-badge-label { font-weight: 500; opacity: .85; }

.tslp-credit-badge.is-low { border-color: rgba(var(--warning-rgb), .35); background: rgba(var(--warning-rgb), .12); color: rgb(var(--warning-rgb)); }
.tslp-credit-badge.is-low:hover { background: rgba(var(--warning-rgb), .18); }
.tslp-credit-badge.is-empty { border-color: rgba(var(--danger-rgb), .35); background: rgba(var(--danger-rgb), .12); color: rgb(var(--danger-rgb)); }
.tslp-credit-badge.is-empty:hover { background: rgba(var(--danger-rgb), .18); }

.tslp-credit-badge-dot {
    width: .4rem; height: .4rem; border-radius: 50%; background: rgb(var(--danger-rgb));
    box-shadow: 0 0 0 0 rgba(var(--danger-rgb), .6); animation: tslpCreditPulse 1.8s infinite;
}
@keyframes tslpCreditPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--danger-rgb), .55); }
    70%  { box-shadow: 0 0 0 .35rem rgba(var(--danger-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0); }
}
.tslp-credit-badges.is-compact .tslp-credit-badge { padding: .2rem .5rem; font-size: .7rem; }

/* ---- modal ---- */
.tslp-credit-modal .modal-content { border: 0; border-radius: 1rem; overflow: hidden; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.18); }
.tslp-credit-modal-header { border-bottom: 1px solid var(--default-border); padding: 1rem 1.25rem; }
.tslp-credit-modal-avatar {
    width: 2.75rem; height: 2.75rem; border-radius: .875rem;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0;
}
.tslp-credit-modal-footer { border-top: 1px solid var(--default-border); padding: .875rem 1.25rem; gap: .5rem; }

.tslp-credit-hero {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .10), rgba(var(--primary-rgb), .02));
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: .875rem; padding: 1.125rem 1.25rem; margin-bottom: 1.25rem;
}
.tslp-credit-hero-main { display: flex; align-items: baseline; gap: .5rem; }
.tslp-credit-hero-value { font-size: 2.25rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--default-text-color); }
.tslp-credit-hero-unit { font-size: .875rem; color: var(--text-muted); }
.tslp-credit-hero-meta { display: flex; justify-content: space-between; gap: .75rem; font-size: .8125rem; color: var(--text-muted); margin: .5rem 0 .5rem; flex-wrap: wrap; }
.tslp-credit-hero-price { font-weight: 600; }
.tslp-credit-progress { height: .5rem; border-radius: 999px; background: rgba(0,0,0,.06); }
.tslp-credit-progress .progress-bar { border-radius: 999px; transition: width .45s ease; }
.tslp-credit-expiry { margin-top: .625rem; font-size: .8125rem; color: rgb(var(--warning-rgb)); font-weight: 500; }

.tslp-credit-section-title { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 .75rem; font-weight: 600; }

.tslp-credit-packages { display: flex; flex-direction: column; gap: .625rem; }
.tslp-credit-package { border: 1px solid var(--default-border); border-radius: .75rem; padding: .75rem .875rem; transition: border-color .15s ease, box-shadow .15s ease; }
.tslp-credit-package:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); }
.tslp-credit-package.is-active { border-color: rgba(var(--primary-rgb), .45); background: rgba(var(--primary-rgb), .03); }
.tslp-credit-package.is-expired { opacity: .62; }
.tslp-credit-package-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .5rem; }
.tslp-credit-package-name { font-weight: 600; font-size: .875rem; }
.tslp-credit-package-active, .tslp-credit-package-expired { font-size: .625rem; margin-left: .375rem; vertical-align: middle; }
.tslp-credit-package-remaining { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tslp-credit-package-progress { height: .3125rem; border-radius: 999px; background: rgba(0,0,0,.06); }
.tslp-credit-package-progress .progress-bar { border-radius: 999px; }
.tslp-credit-package-foot { margin-top: .5rem; font-size: .75rem; color: var(--text-muted); }

@media (max-width: 575.98px) {
    .tslp-credit-badge-label { display: none; }           /* icon + number only on phones */
    .tslp-credit-hero-value { font-size: 1.875rem; }
    .tslp-credit-modal-footer { flex-direction: column-reverse; }
    .tslp-credit-modal-footer .btn { width: 100%; }
    .tslp-credit-package-head { flex-direction: column; gap: .25rem; }
    .tslp-credit-package-head .text-end { text-align: left !important; }
}

[data-theme-mode="dark"] .tslp-credit-progress,
[data-theme-mode="dark"] .tslp-credit-package-progress { background: rgba(255,255,255,.08); }
[data-theme-mode="dark"] .tslp-credit-modal .modal-content { box-shadow: 0 1.5rem 3rem rgba(0,0,0,.5); }

/* ---- credit modal: Active / Expired collapsible groups + extension ladder ---- */
.tslp-credit-group { border: 1px solid var(--default-border); border-radius: .75rem; margin-bottom: .75rem; overflow: hidden; }
.tslp-credit-group.is-muted { background: rgba(0,0,0,.015); }
.tslp-credit-group-toggle {
    width: 100%; display: flex; align-items: center; gap: .5rem;
    background: transparent; border: 0; padding: .625rem .875rem; text-align: left;
    font-size: .8125rem; font-weight: 600; color: var(--default-text-color);
}
.tslp-credit-group-toggle:hover { background: rgba(var(--primary-rgb), .04); }
.tslp-credit-group-toggle:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }
.tslp-credit-group-title { flex-shrink: 0; }
.tslp-credit-group-meta { margin-left: auto; font-weight: 500; color: var(--text-muted); font-size: .75rem; text-align: right; }
.tslp-credit-chevron { transition: transform .2s ease; font-size: 1.125rem; color: var(--text-muted); }
.tslp-credit-group-toggle.collapsed .tslp-credit-chevron { transform: rotate(-90deg); }
.tslp-credit-group .tslp-credit-packages { padding: 0 .75rem .75rem; }

.tslp-credit-package-actions { margin-left: auto; display: inline-flex; gap: .375rem; }
.tslp-credit-package-foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tslp-credit-extend-btn, .tslp-credit-upgrade-btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .7rem; border-radius: 999px; }

.tslp-credit-extend-panel { margin-top: .625rem; padding-top: .625rem; border-top: 1px dashed var(--default-border); }
.tslp-credit-extend-hint { font-size: .75rem; color: var(--text-muted); margin-bottom: .5rem; }
.tslp-credit-extend-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.tslp-credit-extend-option {
    display: flex; flex-direction: column; gap: .125rem; text-decoration: none;
    border: 1px solid var(--default-border); border-radius: .625rem; padding: .5rem .625rem;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tslp-credit-extend-option:hover {
    border-color: var(--primary-color); background: rgba(var(--primary-rgb), .05);
    transform: translateY(-2px); box-shadow: 0 .35rem .9rem rgba(0,0,0,.08);
}
.tslp-credit-extend-months { font-weight: 700; font-size: .875rem; color: var(--primary-color); }
.tslp-credit-extend-until { font-size: .6875rem; color: var(--text-muted); }
.tslp-credit-extend-price { font-weight: 700; font-size: 1rem; color: var(--default-text-color); margin-top: .125rem; }
.tslp-credit-extend-pct { font-size: .625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 575.98px) {
    .tslp-credit-extend-options { grid-template-columns: 1fr; }
    .tslp-credit-extend-option { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: .375rem; }
    .tslp-credit-extend-price { margin-top: 0; margin-left: auto; }
    .tslp-credit-package-actions { margin-left: 0; width: 100%; }
}
[data-theme-mode="dark"] .tslp-credit-group.is-muted { background: rgba(255,255,255,.02); }