/* [claude:sonnet-4-6][client:2.1.152][hurc:v0.7.0]
 *
 * Neural-LLM — My Account Dashboard Styles
 *
 * PURPOSE:
 *   Provides all styling for the unified My Account dashboard, order
 *   history, subscription management, and license key views.
 *   Covers responsive card grid (4-col → 2-col → 1-col), status pills,
 *   license key copy UX, and mobile collapse for tabular data.
 *
 * ARCHITECTURE:
 *   Load order: tokens.css → template.css → hikashop-checkout.css → account-dashboard.css
 *   All values sourced exclusively from --nllm-* / --pc-* tokens (tokens.css).
 *   No hardcoded hex values.
 *
 *   BEM blocks:
 *     .neural-account__*   — My Account cpanel / card grid
 *     .neural-order__*     — Order listing / detail
 *     .neural-sub__*       — Subscription listing / detail
 *     .neural-license__*   — License key list / copy UX
 *
 * DEPENDENCIES:
 *   /media/com_neurallicense/brand/tokens.css  (--nllm-* / --pc-*)
 *
 * NON-AFFILIATION:
 *   Power Claude is an independent product by Neural-LLM — not affiliated
 *   with Anthropic, PBC.
 *
 * @copyright  (C) 2026 Neural LLM. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

/* ── §1  ACCOUNT CPANEL ─────────────────────────────────────────────── */

.neural-account__cpanel {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--nllm-space-lg) var(--nllm-space-md);
}

/* Dashboard header */
.neural-account__header {
    margin-bottom: var(--nllm-space-xl);
    padding-bottom: var(--nllm-space-md);
    border-bottom: 1px solid var(--nllm-surface-soft);
}

.neural-account__heading {
    font-size: var(--nllm-text-h2);
    font-weight: 700;
    color: var(--nllm-text);
    margin: 0 0 var(--nllm-space-xs);
    line-height: 1.2;
}

.neural-account__subheading {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-muted);
    margin: 0;
}

/* ── §2  CARD GRID (4-col → 2-col → 1-col) ─────────────────────────── */

/*
 * Desktop: 5 cards in a single row (2 + 3 or auto-fill). We use auto-fill
 * with a min of 200px so the grid adapts to any count.
 */
.neural-account__card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--nllm-space-md);
    margin-bottom: var(--nllm-space-xl);
}

/* Individual card */
.neural-account__card {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-sm);
    transition: border-color var(--nllm-transition-fast), box-shadow var(--nllm-transition-fast), transform var(--nllm-transition-fast);
    position: relative;
    overflow: hidden;
}

.neural-account__card:hover {
    border-color: var(--nllm-violet);
    box-shadow: var(--nllm-shadow-md);
    transform: translateY(-2px);
}

/* Icon row with optional count badge */
.neural-account__card-icon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--nllm-space-xs);
}

.neural-account__card-icon {
    font-size: 2rem;
    line-height: 1;
}

.neural-account__card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background-color: var(--nllm-violet);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--nllm-radius-full);
}

.neural-account__card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nllm-text);
    margin: 0;
    line-height: 1.3;
}

.neural-account__card-desc {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
    margin: 0;
    flex: 1;
    line-height: 1.5;
}

.neural-account__card-cta {
    align-self: flex-start;
    margin-top: auto;
}

/* Card color variants — subtle left-border accent */
.neural-account__card--subscriptions { border-left: 3px solid var(--nllm-violet); }
.neural-account__card--licenses      { border-left: 3px solid var(--nllm-cyan); }
.neural-account__card--orders        { border-left: 3px solid var(--pc-bolt-amber); }
.neural-account__card--billing       { border-left: 3px solid var(--pc-status-flowing); }
.neural-account__card--profile       { border-left: 3px solid var(--nllm-text-subtle); }
/* [ai] Downloads card accent — reuses the cyan license accent family since the
 * downloads page is the install counterpart to the license keys. */
.neural-account__card--downloads     { border-left: 3px solid var(--nllm-cyan); }

/* Orders preview section below the grid */
.neural-account__orders-preview {
    margin-top: var(--nllm-space-xl);
}

/* Plugin injection areas */
.neural-account__plugin-top,
.neural-account__plugin-mid,
.neural-account__plugin-main,
.neural-account__plugin-bottom {
    margin-bottom: var(--nllm-space-md);
}

/* Account-level disclaimer (inherits .neural-checkout__disclaimer) */
.neural-account__disclaimer {
    margin-top: var(--nllm-space-xl);
}

/* ── §3  STATUS PILLS ──────────────────────────────────────────────── */

/*
 * Unified status pill system. Used in orders, subscriptions,
 * and license cards. Key + color pairs:
 *   active / confirmed / paid     → green  (flowing)
 *   pending / processing          → amber  (cooldown)
 *   cancelled / cancel / expired  → gray   (surface-edge)
 *   past_due / failed / overdue   → red    (blocked)
 *   expiring_soon / trial         → amber
 */
.neural-account__status-pill,
.neural-order__status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--nllm-radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Active / confirmed / paid — green */
.neural-account__status-pill--active,
.neural-account__status-pill--confirmed,
.neural-account__status-pill--paid,
.neural-order__status-pill--confirmed,
.neural-order__status-pill--shipped,
.neural-order__status-pill--delivered {
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

/* Pending / processing / trial — amber */
.neural-account__status-pill--pending,
.neural-account__status-pill--processing,
.neural-account__status-pill--trial,
.neural-account__status-pill--expiring,
.neural-account__status-pill--expiring_soon,
.neural-order__status-pill--pending,
.neural-order__status-pill--processing,
.neural-order__status-pill--partially_shipped {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

/* Cancelled / expired / refunded — gray */
.neural-account__status-pill--cancelled,
.neural-account__status-pill--cancel,
.neural-account__status-pill--expired,
.neural-account__status-pill--unknown,
.neural-order__status-pill--cancelled,
.neural-order__status-pill--refunded,
.neural-order__status-pill--archived {
    background-color: rgba(100, 116, 139, 0.18);
    color: var(--nllm-text-subtle);
    border: 1px solid rgba(100, 116, 139, 0.35);
}

/* Past due / failed / overdue — red */
.neural-account__status-pill--past_due,
.neural-account__status-pill--failed,
.neural-account__status-pill--overdue,
.neural-order__status-pill--failed,
.neural-order__status-pill--payment_failed {
    background-color: rgba(220, 38, 38, 0.15);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.35);
}

/* Tier badges (Free / Pro / Team) */
.neural-account__tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: var(--nllm-radius-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.neural-account__tier-badge--free  { background-color: rgba(100, 116, 139, 0.18); color: var(--nllm-text-subtle); }
.neural-account__tier-badge--pro   { background-image: var(--nllm-gradient-soft); color: #ffffff; }
.neural-account__tier-badge--team  { background-image: var(--pc-bolt-gradient); color: var(--nllm-text-on-light); }

/* ── §4  ORDER LISTING ─────────────────────────────────────────────── */

.neural-order__listing {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--nllm-space-lg) var(--nllm-space-md);
}

/* Search / filter bar */
.neural-order__filters {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--nllm-space-lg);
}

.neural-order__search-wrap {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-xs);
    flex: 1;
    min-width: 200px;
}

.neural-order__search-input {
    flex: 1;
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-sm);
    color: var(--nllm-text);
    padding: 0.5rem 0.875rem;
    font-size: var(--nllm-text-sm);
}

.neural-order__search-input:focus {
    border-color: var(--nllm-violet);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
    outline: none;
}

/* Empty state */
.neural-order__empty {
    text-align: center;
    padding: var(--nllm-space-2xl) var(--nllm-space-lg);
    color: var(--nllm-text-subtle);
}

.neural-order__empty-icon { font-size: 3rem; display: block; margin-bottom: var(--nllm-space-sm); }

/* Order row */
.neural-order__row {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    margin-bottom: var(--nllm-space-md);
    overflow: hidden;
    transition: border-color var(--nllm-transition-fast), box-shadow var(--nllm-transition-fast);
}

.neural-order__row:hover { border-color: var(--nllm-surface-edge); box-shadow: var(--nllm-shadow-sm); }

/* Summary bar — always visible, one-line */
.neural-order__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nllm-space-md) var(--nllm-space-lg);
    gap: var(--nllm-space-md);
    flex-wrap: wrap;
}

.neural-order__meta {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-md);
}

.neural-order__number {
    font-weight: 600;
    color: var(--nllm-violet-soft);
    text-decoration: none;
    font-size: 0.9375rem;
}

.neural-order__number:hover { color: var(--nllm-violet-pale); text-decoration: underline; }

.neural-order__date { font-size: var(--nllm-text-sm); color: var(--nllm-text-subtle); }

.neural-order__right {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-md);
}

.neural-order__total { font-weight: 700; font-size: 1rem; color: var(--nllm-text); }

/* Expanded body */
.neural-order__body {
    padding: var(--nllm-space-md) var(--nllm-space-lg);
    border-top: 1px solid var(--nllm-surface-soft);
    display: flex;
    align-items: flex-start;
    gap: var(--nllm-space-md);
    flex-wrap: wrap;
}

.neural-order__info { flex: 1; min-width: 0; }
.neural-order__invoice-label { font-size: var(--nllm-text-sm); color: var(--nllm-text-subtle); }
.neural-order__shipping { font-size: var(--nllm-text-sm); color: var(--nllm-text-muted); }
.neural-order__shipping-label { color: var(--nllm-text-subtle); margin-right: 0.25rem; }
.neural-order__actions { margin-left: auto; display: flex; gap: var(--nllm-space-xs); flex-wrap: wrap; }
.neural-order__toggle { }

.neural-order__pagination { margin-top: var(--nllm-space-lg); display: flex; justify-content: center; }
.neural-order__count { margin-left: var(--nllm-space-md); font-size: var(--nllm-text-sm); color: var(--nllm-text-subtle); }

/* ── §5  ORDER DETAIL ──────────────────────────────────────────────── */

.neural-order__detail {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--nllm-space-lg) var(--nllm-space-md);
}

.neural-order__action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nllm-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--nllm-space-lg);
}

.neural-order__action-bar-right { display: flex; gap: var(--nllm-space-xs); flex-wrap: wrap; }

.neural-order__detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nllm-space-md);
    margin-bottom: var(--nllm-space-lg);
    padding-bottom: var(--nllm-space-md);
    border-bottom: 1px solid var(--nllm-surface-soft);
    flex-wrap: wrap;
}

.neural-order__detail-meta {
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-xs);
}

.neural-order__detail-number { font-size: 1.125rem; font-weight: 600; color: var(--nllm-text); }
.neural-order__detail-invoice { font-size: var(--nllm-text-sm); color: var(--nllm-text-subtle); }
.neural-order__detail-date { font-size: var(--nllm-text-sm); color: var(--nllm-text-subtle); }

/* Addresses */
.neural-order__addresses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--nllm-space-md);
    margin-bottom: var(--nllm-space-lg);
}

.neural-order__address-block {
    background-color: var(--nllm-surface-soft);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-sm);
    padding: var(--nllm-space-md);
}

.neural-order__address-title {
    font-size: var(--nllm-text-sm);
    font-weight: 600;
    color: var(--nllm-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--nllm-space-sm);
}

/* Products table */
.neural-order__products { margin-bottom: var(--nllm-space-lg); }

.neural-order__products-table {
    width: 100%;
    border-collapse: collapse;
}

.neural-order__products-table th {
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text-subtle);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    text-align: left;
    border-bottom: 2px solid var(--nllm-surface-edge);
}

.neural-order__products-table td {
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    border-bottom: 1px solid var(--nllm-surface-soft);
    color: var(--nllm-text-muted);
    vertical-align: middle;
}

.neural-order__product-name { color: var(--nllm-text); }
.neural-order__totals-row td { border-bottom: none; padding-top: var(--nllm-space-md); }
.neural-order__totals-label { text-align: right; color: var(--nllm-text-subtle); font-size: var(--nllm-text-sm); }
.neural-order__totals-amount { color: var(--nllm-violet-soft); }

/* Invoice wrapper */
.neural-order__invoice-wrap { margin-top: var(--nllm-space-lg); }

/* ── §6  SUBSCRIPTION LISTING ──────────────────────────────────────── */

.neural-sub__listing {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--nllm-space-lg) var(--nllm-space-md);
}

.neural-sub__empty {
    text-align: center;
    padding: var(--nllm-space-2xl) var(--nllm-space-lg);
    color: var(--nllm-text-subtle);
}

.neural-sub__empty-icon { font-size: 3rem; display: block; margin-bottom: var(--nllm-space-sm); }

/* Desktop table */
.neural-sub__table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--nllm-radius-md);
    overflow: hidden;
}

.neural-sub__table thead th {
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text-subtle);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    text-align: left;
    border-bottom: 2px solid var(--nllm-surface-edge);
}

.neural-sub__table td {
    padding: var(--nllm-space-md);
    border-bottom: 1px solid var(--nllm-surface-soft);
    color: var(--nllm-text-muted);
    background-color: var(--nllm-surface);
    vertical-align: middle;
    font-size: var(--nllm-text-sm);
}

.neural-sub__table tr:hover td { background-color: rgba(124, 58, 237, 0.03); }
.neural-sub__product-name a { color: var(--nllm-violet-soft); font-weight: 600; text-decoration: none; }
.neural-sub__product-name a:hover { text-decoration: underline; }
.neural-sub__actions-col { text-align: right; }
.neural-sub__actions { display: flex; gap: var(--nllm-space-xs); justify-content: flex-end; flex-wrap: wrap; }

/* Cancel button — always red-ish to signal destructive action */
.neural-sub__cancel-btn {
    background-color: rgba(220, 38, 38, 0.12) !important;
    border: 1px solid rgba(220, 38, 38, 0.4) !important;
    color: #f87171 !important;
    transition: background-color var(--nllm-transition-fast), border-color var(--nllm-transition-fast);
}

.neural-sub__cancel-btn:hover {
    background-color: rgba(220, 38, 38, 0.22) !important;
    border-color: rgba(220, 38, 38, 0.65) !important;
    color: #fca5a5 !important;
}

/* Mobile card rows — hidden at ≥768px */
.neural-sub__mobile-card { display: none; }
.neural-sub__mobile-body {
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-sm);
    padding: var(--nllm-space-md);
    background-color: var(--nllm-surface);
    border-bottom: 1px solid var(--nllm-surface-soft);
}
.neural-sub__mobile-actions { display: flex; gap: var(--nllm-space-xs); flex-wrap: wrap; }
.neural-sub__renew-label { font-size: var(--nllm-text-sm); color: var(--nllm-text-subtle); }

.neural-sub__pagination { margin-top: var(--nllm-space-lg); display: flex; justify-content: center; }

/* ── §7  SUBSCRIPTION DETAIL ───────────────────────────────────────── */

.neural-sub__detail {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--nllm-space-lg) var(--nllm-space-md);
}

.neural-sub__detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nllm-space-md);
    margin-bottom: var(--nllm-space-lg);
    padding-bottom: var(--nllm-space-md);
    border-bottom: 1px solid var(--nllm-surface-soft);
}

.neural-sub__detail-title {
    font-size: var(--nllm-text-h3);
    font-weight: 700;
    color: var(--nllm-text);
    margin: 0;
}

.neural-sub__detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--nllm-space-md);
    margin-bottom: var(--nllm-space-xl);
}

.neural-sub__detail-card {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-lg);
}

.neural-sub__detail-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--nllm-text-muted);
    margin: 0 0 var(--nllm-space-md);
    padding-bottom: var(--nllm-space-sm);
    border-bottom: 1px solid var(--nllm-surface-soft);
}

.neural-sub__detail-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--nllm-space-xs) var(--nllm-space-md); margin: 0; }
.neural-sub__detail-dl dt { font-size: var(--nllm-text-sm); color: var(--nllm-text-subtle); white-space: nowrap; }
.neural-sub__detail-dl dd { font-size: var(--nllm-text-sm); color: var(--nllm-text-muted); margin: 0; }
.neural-sub__renew-date { color: var(--pc-bolt-amber); font-weight: 600; }

.neural-sub__payment-name { color: var(--nllm-text-muted); font-size: var(--nllm-text-sm); }

/* License block within subscription detail */
.neural-sub__license-block {
    background-color: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-lg);
    margin-bottom: var(--nllm-space-xl);
}

.neural-sub__license-title {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--nllm-text);
    margin: 0 0 var(--nllm-space-sm);
}

.neural-sub__license-expiry { font-size: var(--nllm-text-sm); color: var(--nllm-text-subtle); margin: 0 0 var(--nllm-space-md); }
.neural-sub__license-hint { font-size: var(--nllm-text-sm); color: var(--nllm-text-subtle); margin-top: var(--nllm-space-sm); }

/* Cancel section */
.neural-sub__cancel-section {
    background-color: rgba(220, 38, 38, 0.05);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-lg);
    margin-bottom: var(--nllm-space-xl);
}

.neural-sub__cancel-title { font-size: 1rem; font-weight: 600; color: #f87171; margin: 0 0 var(--nllm-space-sm); }
.neural-sub__cancel-desc { font-size: var(--nllm-text-sm); color: var(--nllm-text-subtle); margin: 0 0 var(--nllm-space-md); }

.neural-sub__not-found { color: var(--nllm-text-subtle); padding: var(--nllm-space-xl) 0; text-align: center; }

/* ── §8  LICENSE KEY LIST ───────────────────────────────────────────── */

.neural-license__list {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--nllm-space-lg) var(--nllm-space-md);
}

.neural-license__header { margin-bottom: var(--nllm-space-xl); }
.neural-license__title { font-size: var(--nllm-text-h2); font-weight: 700; color: var(--nllm-text); margin: 0 0 var(--nllm-space-xs); }
.neural-license__subtitle { font-size: var(--nllm-text-sm); color: var(--nllm-text-muted); margin: 0; }

.neural-license__empty {
    text-align: center;
    padding: var(--nllm-space-2xl) var(--nllm-space-lg);
    color: var(--nllm-text-subtle);
}
.neural-license__empty-icon { font-size: 3rem; display: block; margin-bottom: var(--nllm-space-sm); }

/* Card stack */
.neural-license__cards { display: flex; flex-direction: column; gap: var(--nllm-space-md); }

.neural-license__card {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-lg);
    transition: border-color var(--nllm-transition-fast);
}

.neural-license__card:hover { border-color: var(--nllm-violet); }

.neural-license__card--expired {
    opacity: 0.6;
    border-color: var(--nllm-surface-soft);
}

.neural-license__card--pro  { border-left: 3px solid var(--nllm-violet); }
.neural-license__card--team { border-left: 3px solid var(--pc-bolt-amber); }
.neural-license__card--free { border-left: 3px solid var(--nllm-surface-edge); }

.neural-license__card-header {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-sm);
    margin-bottom: var(--nllm-space-md);
    flex-wrap: wrap;
}

.neural-license__seats-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: var(--nllm-radius-full);
    font-size: 11px;
    font-weight: 600;
    background-color: rgba(124, 58, 237, 0.15);
    color: var(--nllm-violet-pale);
}

.neural-license__expiry {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
    margin-left: auto;
}

.neural-license__expiry--expired { color: #f87171; }

/* Key display + copy row */
.neural-license__key-row {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-sm);
    background-color: var(--nllm-surface-deep);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-sm);
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    margin-bottom: var(--nllm-space-md);
}

.neural-license__key-display {
    flex: 1;
    font-family: var(--nllm-font-mono);
    font-size: 11px;
    color: var(--nllm-violet-pale);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    border: none;
    padding: 0;
    /* Allow selection for manual copy */
    user-select: text;
    cursor: text;
}

.neural-license__copy-btn {
    flex-shrink: 0;
    transition: background-color var(--nllm-transition-fast), color var(--nllm-transition-fast);
}

.neural-license__copy-btn--success {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #4ade80 !important;
}

.neural-license__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nllm-space-xs);
}

.neural-license__created { font-size: 11px; color: var(--nllm-text-subtle); }

/* Deactivate button */
.neural-license__deactivate-btn {
    background-color: transparent !important;
    border-color: var(--nllm-surface-edge) !important;
    color: var(--nllm-text-subtle) !important;
    font-size: 11px !important;
}

.neural-license__deactivate-btn:hover {
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: #f87171 !important;
}

/* ── §8b  MANAGE ACTIVATIONS (per-device panel) ────────────────────────
 * [ai] Active-machine list rendered under each license card. Each row shows
 * an abbreviated machine fingerprint, the client version, and a human
 * last-seen, plus a per-device deactivate button that frees only that one
 * slot (distinct from the whole-key deactivate in the card footer above).
 * Visually it's a sub-panel inset from the card body with a top divider so
 * it reads as "details for this key" rather than a separate card.
 */
.neural-license__devices {
    margin-top: var(--nllm-space-sm);
    padding-top: var(--nllm-space-sm);
    border-top: 1px solid var(--nllm-surface-edge);
}

.neural-license__devices-heading {
    margin: 0 0 var(--nllm-space-xs);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nllm-text-subtle);
}

.neural-license__devices-intro,
.neural-license__devices-empty {
    margin: 0 0 var(--nllm-space-xs);
    font-size: 11px;
    color: var(--nllm-text-subtle);
}

.neural-license__device-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-xs);
}

.neural-license__device {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nllm-space-xs);
    padding: var(--nllm-space-xs) 0;
}

.neural-license__device + .neural-license__device {
    border-top: 1px dashed var(--nllm-surface-edge);
}

.neural-license__device-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nllm-space-sm);
    font-size: 11px;
    color: var(--nllm-text-subtle);
}

.neural-license__device-fingerprint {
    font-family: var(--nllm-font-mono, monospace);
    font-size: 11px;
    color: var(--nllm-text);
}

.neural-license__device-deactivate-btn {
    background-color: transparent !important;
    border-color: var(--nllm-surface-edge) !important;
    color: var(--nllm-text-subtle) !important;
    font-size: 11px !important;
}

.neural-license__device-deactivate-btn:hover {
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: #f87171 !important;
}

/* ── §8c  TRIAL-STATUS BANNER (dashboard CTA) ──────────────────────────
 * [ai] Countdown + Activate/Upgrade CTA shown on the My Account dashboard
 * when the customer is on an active Power Claude trial. Accent-bordered
 * call-out so it reads as a time-sensitive prompt without alarming the user.
 */
.neural-account__trial-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nllm-space-sm);
    margin-bottom: var(--nllm-space-md);
    padding: var(--nllm-space-md);
    border: 1px solid var(--nllm-accent, #7a5af8);
    border-radius: var(--nllm-radius-md, 10px);
    background: var(--nllm-accent-soft, rgba(122, 90, 248, 0.08));
}

.neural-account__trial-copy { display: flex; flex-direction: column; gap: 2px; }

.neural-account__trial-heading {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--nllm-text);
}

.neural-account__trial-countdown {
    font-size: 13px;
    color: var(--nllm-text-subtle);
}

/* ── §8d  DASHBOARD BILLING-HELP NOTE ──────────────────────────────────
 * [ai] Support / plan-change / invoice fallback line under the card grid so
 * the renewal + receipt paths are never a silent dead-end (A4d finding:
 * native HikaShop subscription + order-history pages cover both, this note
 * points at them and offers a support email as the explicit backstop).
 */
.neural-account__billing-help {
    margin: var(--nllm-space-md) 0 0;
    font-size: 12px;
    color: var(--nllm-text-subtle);
    text-align: center;
}

.neural-account__billing-help a { color: var(--nllm-accent, #7a5af8); }

/* ── §9  RESPONSIVE ────────────────────────────────────────────────── */

/* ≤1024px — 2-column card grid */
@media (max-width: 1024px) {
    .neural-account__card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ≤768px — all single-column; tables switch to card collapse */
@media (max-width: 768px) {
    .neural-account__card-grid {
        grid-template-columns: 1fr;
    }

    .neural-sub__table thead { display: none; }
    .neural-sub__table tr.neural-sub__row { display: none; }
    .neural-sub__mobile-card { display: table-row; }

    .neural-order__body { flex-direction: column; }
    .neural-order__actions { margin-left: 0; width: 100%; justify-content: flex-start; }
    .neural-order__action-bar { flex-direction: column; align-items: flex-start; }
    .neural-order__action-bar-right { width: 100%; flex-wrap: wrap; }

    .neural-license__key-row { flex-direction: column; align-items: flex-start; }
    .neural-license__copy-btn { width: 100%; }

    .neural-order__detail-header { flex-direction: column; }
    .neural-sub__detail-header { flex-direction: column; }
    .neural-sub__detail-grid { grid-template-columns: 1fr; }
    .neural-order__addresses { grid-template-columns: 1fr; }

    .neural-order__products-table thead { display: none; }
    .neural-order__products-table td {
        display: block;
        padding: var(--nllm-space-xs) var(--nllm-space-md);
    }
    .neural-order__product-img { display: none; }
    .neural-order__product-name::before { content: attr(data-label); display: block; font-weight: 600; color: var(--nllm-text-subtle); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
    .neural-order__totals-row td { display: block; }
}

/* ≤480px — tighten gutters */
@media (max-width: 480px) {
    .neural-account__cpanel,
    .neural-order__listing,
    .neural-order__detail,
    .neural-sub__listing,
    .neural-sub__detail,
    .neural-license__list {
        padding-left: var(--nllm-space-sm);
        padding-right: var(--nllm-space-sm);
    }

    .neural-account__heading { font-size: var(--nllm-text-h3); }
    .neural-sub__detail-title { font-size: 1.25rem; }
}

/* ── [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] shop empty-state + form-control dark-mode overrides ────────────
 *
 * the shop's stock cpanel_orders.php / order/listing.php fall back to bright
 * white containers + black text whenever the user has no data. Against the
 * Neural-LLM dark surface this looks like a broken "page not found" box.
 *
 * Override the affected wrappers so empty states match the dark theme:
 *
 *   - .neural-order__empty           (our own override's "no orders" box)
 *   - .hikashop_orders_listing       (the order listing table wrapper)
 *   - .hikashop_cpanel_orders_main   (the cpanel "Your last orders" preview)
 *   - .hk-pg-empty / .hkc-empty      (shop 5 generic empty-state utility)
 *   - .hikashop_search / select.hikashop_filter — search/filter controls
 *     above the empty listing render bright white by default
 * ───────────────────────────────────────────────────────────────────────── */

/* Strengthen the empty box so it reads as a deliberate placeholder, not broken */
.neural-order__empty,
.hikashop_orders_listing:has(> :empty),
.hikashop_cpanel_orders_main:empty,
.hk-pg-empty,
.hkc-empty {
    background-color: var(--nllm-surface);
    color: var(--nllm-text-muted);
    border: 1px dashed var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-2xl) var(--nllm-space-lg);
    text-align: center;
    min-height: 120px;
}

/* "Your last orders" panel inside cpanel — wrap with dark surface */
.neural-account__orders-preview {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-lg);
    margin-top: var(--nllm-space-xl);
    color: var(--nllm-text-muted);
}

.neural-account__orders-preview h2,
.neural-account__orders-preview h3,
.neural-account__orders-preview .hikashop_orders_title {
    color: var(--nllm-text);
    margin-top: 0;
}

/* shop default tables — invert to dark surface */
.hikashop_orders_main_listing table,
.hikashop_cpanel_orders_main table {
    width: 100%;
    background-color: transparent;
    color: var(--nllm-text);
    border-collapse: collapse;
}

.hikashop_orders_main_listing table th,
.hikashop_cpanel_orders_main table th {
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text);
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    text-align: start;
    border-bottom: 1px solid var(--nllm-surface-edge);
}

.hikashop_orders_main_listing table td,
.hikashop_cpanel_orders_main table td {
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    border-bottom: 1px solid var(--nllm-surface-soft);
    color: var(--nllm-text-muted);
}

.hikashop_orders_main_listing tr:hover td,
.hikashop_cpanel_orders_main tr:hover td {
    background-color: var(--nllm-surface-soft);
}

/* Search + filter dropdowns above order listing render bright white otherwise */
.hikashop_search input[type="text"],
.hikashop_search input[type="search"],
input.hikashop_search,
select.hikashop_filter,
.neural-order__filters select,
.neural-order__filters input {
    background-color: var(--nllm-surface);
    color: var(--nllm-text);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-sm);
    padding: 0.5rem 0.75rem;
    font: inherit;
}

.hikashop_search input::placeholder,
input.hikashop_search::placeholder {
    color: var(--nllm-text-subtle);
}

/* The "back" / "go" buttons that ship with shop default listing */
.hikashop_listing_filter button,
.hikashop_listing_filter a.btn {
    background: var(--nllm-violet);
    color: var(--nllm-text);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--nllm-radius-sm);
    cursor: pointer;
}

.hikashop_listing_filter button:hover,
.hikashop_listing_filter a.btn:hover {
    background: var(--nllm-violet-deep);
}

/* ── [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] §X  HIKASHOP CPANEL SIDEBAR (dark-theme override) ───────────────────
 *
 * SCOPE
 *   shop 6.4.1 renders the customer-dashboard left rail via
 *   user/cpanel_sidebar.php. Out of the box it's a white card with cyan
 *   sprite icons — clashes with the Neural-LLM dark surface and reads as a
 *   pop-out modal rather than a navigation rail. The override at
 *   templates/nllm/html/com_hikashop/user/cpanel_sidebar.php emits the BEM
 *   classes below in addition to the shop's own classes (which are kept so
 *   any core CSS / JS that targets them still works).
 *
 * VISUAL TARGET
 *   - Container: full-bleed dark surface, soft 1px border
 *   - Items: row layout (glyph · label · counter)
 *   - Active item: violet accent stripe on the inline-start edge + raised bg
 *   - Hover: subtle surface lift + label color jump
 *   - Counters: small pill, violet-on-dark
 *
 * STRUCTURE-FROM-TOKENS
 *   All color/spacing/radius via --nllm-* tokens — no hardcoded hex.
 * ───────────────────────────────────────────────────────────────────────── */

.neural-account__sidebar {
    /* Replace the default shop white card with the dark surface */
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-sm);
    margin-bottom: var(--nllm-space-lg);
}

.neural-account__sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Individual sidebar item — row with glyph, label, optional counter.
 *
 * [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Selectors below are compound (.hika_cpanel_icons > a.neural-account__sidebar-item)
 * to BEAT the shop's frontend_default.css (specificity 0,1,1: `.hika_cpanel_icons > a`)
 * which loads AFTER our stylesheet on cpanel SUB-VIEWS (orders, address listing,
 * downloads). On the cpanel landing itself our stylesheet is last and the bare
 * .neural-account__sidebar-item selector would win — but the same sidebar markup
 * is rendered on every sub-view, so we need the compound selector everywhere. */
.hika_cpanel_icons > a.neural-account__sidebar-item,
.neural-account__sidebar a.neural-account__sidebar-item {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: var(--nllm-space-sm);
    padding: 0.625rem 0.75rem;
    margin-bottom: 0;
    background-color: transparent;
    color: var(--nllm-text-muted);
    text-decoration: none;
    border: 1px solid transparent;
    border-inline-start: 3px solid transparent;
    border-radius: var(--nllm-radius-sm);
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.hika_cpanel_icons > a.neural-account__sidebar-item:hover,
.hika_cpanel_icons > a.neural-account__sidebar-item:focus,
.hika_cpanel_icons > a.neural-account__sidebar-item:focus-visible,
.neural-account__sidebar a.neural-account__sidebar-item:hover,
.neural-account__sidebar a.neural-account__sidebar-item:focus-visible {
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text);
    text-decoration: none;
    outline: none;
}

.hika_cpanel_icons > a.neural-account__sidebar-item:focus-visible,
.neural-account__sidebar a.neural-account__sidebar-item:focus-visible {
    /* Keyboard-only focus ring on top of the hover treatment */
    box-shadow: 0 0 0 2px var(--nllm-violet);
}

/* Active item — violet accent stripe + raised background */
.hika_cpanel_icons > a.neural-account__sidebar-item--active,
.hika_cpanel_icons > a.hika_cpanel_icon_active,
.neural-account__sidebar a.neural-account__sidebar-item--active,
.neural-account__sidebar a.hika_cpanel_icon_active {
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text);
    border-inline-start-color: var(--nllm-violet);
    font-weight: 600;
}

/* the shop's first/last child border-radius rules also need beating —
 * they were clipping our sidebar items into a continuous rounded rect. */
.neural-account__sidebar .hika_cpanel_icons > a:first-child,
.neural-account__sidebar .hika_cpanel_icons > a:last-child {
    border-radius: var(--nllm-radius-sm);
}

/* Force the shop's hk-icon block (default cyan) to inherit our muted color. */
.neural-account__sidebar .hika_cpanel_icons .hk-icon,
.neural-account__sidebar .hika_cpanel_icons .hk-icon .hk-icon-light,
.neural-account__sidebar .hika_cpanel_icons .hk-icon .hk-icon-dark {
    color: inherit;
}

/* Glyph cell — Unicode glyph replaces the shop's bitmap sprite. We hide the
 * sprite (hkicon-48 / icon-48-*) inside the override because the override
 * doesn't emit it; this rule is defensive in case any consumer of the same
 * class path still renders the sprite. */
.neural-account__sidebar-glyph {
    font-size: 1.125rem;
    line-height: 1;
    text-align: center;
    color: var(--nllm-violet-soft, var(--nllm-violet));
}

.neural-account__sidebar-item--active .neural-account__sidebar-glyph,
.neural-account__sidebar-item:hover .neural-account__sidebar-glyph {
    color: var(--nllm-violet);
}

/* Hide the shop's bitmap sprite if it slips through (defensive — the
 * override below also drops it, but if any third-party plugin re-injects
 * the sprite into our markup we don't want the cyan default tint) */
.neural-account__sidebar .hkicon-48,
.neural-account__sidebar .icon-48,
.neural-account__sidebar .fa-stack {
    display: none !important;
}

.neural-account__sidebar-label,
.neural-account__sidebar .hikashop_cpanel_button_text {
    font-size: var(--nllm-text-sm);
    line-height: 1.3;
    color: inherit;
    /* shop core wraps the label in a separate <span>; we override its
     * default block treatment so the grid-column layout keeps working */
    display: block;
}

/* Optional unread/count badge on the right */
.neural-account__sidebar-counter {
    background-color: var(--nllm-violet);
    color: var(--nllm-text);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    line-height: 1.4;
    min-width: 1.5rem;
    text-align: center;
}

/* Override the shop's default .hika_cpanel_side_bar width so it doesn't
 * collapse to a narrow 3-col grid on tablet — we want full-width rail */
.hika_cpanel_side_bar.neural-account__sidebar {
    width: 100%;
    max-width: 280px;
    float: none;
}

@media (max-width: 768px) {
    .hika_cpanel_side_bar.neural-account__sidebar {
        max-width: none;
    }

    .neural-account__sidebar-item {
        padding: 0.75rem 0.875rem;
    }
}

/* ── [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] §X  COM_USERS PROFILE + MULTI-FACTOR (dark-theme override) ─────────
 *
 * SCOPE
 *   Joomla 5's com_users profile view and multifactor management page ship
 *   Bootstrap utility classes that hard-code light backgrounds
 *   (text-muted, bg-light, well, card.bg-light, border-secondary,
 *   border-top border-dark bg-light). Against the dark template these
 *   render as bright white boxes with dim gray text that's effectively
 *   invisible (user interrupt: "this has bad CSS and styling").
 *
 *   Rather than fork every com_users template, scope the rules to
 *   .com-users-profile / .com-users-method* / .com-users-login (already
 *   present in the stock markup) and translate the Bootstrap utility
 *   targets into our --nllm-* token space.
 *
 * INVISIBLE-TEXT FIX
 *   Bootstrap's .text-muted resolves to #6c757d on the default theme; on
 *   our dark surface it's still readable but too dim. We promote it to
 *   --nllm-text-muted (which is tuned against the dark surface) so
 *   descriptions, helper text, and method-card metadata stay legible.
 *
 * STRUCTURE-FROM-TOKENS
 *   Backgrounds, borders, text — all via --nllm-* tokens.
 * ───────────────────────────────────────────────────────────────────────── */

/* Profile container — page-level dark surface wrapper */
.com-users-profile,
.com-users-profile-edit,
.com-users-registration,
.com-users-methods,
.com-users-method-edit,
.com-users-captive,
.com-users-remind,
.com-users-reset {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--nllm-space-lg) var(--nllm-space-md);
    color: var(--nllm-text);
}

/* Section headings inside com_users views */
.com-users-profile h1,
.com-users-profile h2,
.com-users-profile h3,
.com-users-profile-edit h1,
.com-users-profile-edit h2,
.com-users-methods h1,
.com-users-methods h2,
.com-users-method-edit h1,
.com-users-method-edit h2 {
    color: var(--nllm-text);
}

/* The .well wrappers Bootstrap uses — translate to dark surface card */
.com-users-profile__edit-form,
.com-users-login__form,
.com-users-logout__form,
.com-users-registration form.well,
.com-users-remind form.well,
.com-users-reset form.well {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-lg);
    color: var(--nllm-text);
    box-shadow: none;
}

/* Field groups inside the profile editor — labels stay readable */
.com-users-profile label,
.com-users-profile-edit label,
.com-users-methods label,
.com-users-method-edit label {
    color: var(--nllm-text);
    font-weight: 600;
}

/* Tabular sub-sections (profile groups, params) get their own surface card */
.com-users-profile__core,
.com-users-profile__params,
.com-users-profile__custom,
.com-users-profile__multifactor {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-lg);
    margin-bottom: var(--nllm-space-lg);
}

/* Tables inside profile sections — dark-mode treatment matching the
 * .hikashop_orders_listing rules above */
.com-users-profile__core table,
.com-users-profile__params table,
.com-users-profile__custom table,
.com-users-profile__multifactor table,
.com-users-methods table,
.com-users-method-edit table {
    width: 100%;
    background-color: transparent;
    color: var(--nllm-text);
    border-collapse: collapse;
}

.com-users-profile__core th,
.com-users-profile__params th,
.com-users-profile__custom th,
.com-users-profile__multifactor th,
.com-users-methods th,
.com-users-method-edit th {
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text);
    text-align: start;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--nllm-surface-edge);
    font-weight: 600;
}

.com-users-profile__core td,
.com-users-profile__params td,
.com-users-profile__custom td,
.com-users-profile__multifactor td,
.com-users-methods td,
.com-users-method-edit td {
    color: var(--nllm-text-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--nllm-surface-soft);
}

/* Bootstrap .text-muted gets repointed to our dark-surface-tuned muted color.
 * Without this, descriptions / "last used" / method metadata read as
 * near-invisible #6c757d against the dark surface (the explicit user
 * complaint). */
.com-users-profile .text-muted,
.com-users-profile-edit .text-muted,
.com-users-methods .text-muted,
.com-users-method-edit .text-muted,
.com-users-method-name.text-muted,
.com-users-methods-list-method-info.text-muted,
.com-users-method-edit-post-message.text-muted,
.com-users-method-edit-pre-message.text-muted,
.com-users-captive .text-muted,
.com-users-remind .text-muted,
.com-users-reset .text-muted {
    color: var(--nllm-text-muted) !important;
}

/* Bootstrap .bg-light gets translated to surface-soft.
 * Same root cause as .text-muted: stock Bootstrap utility hard-codes a
 * light gray that becomes a bright white block against our dark theme. */
.com-users-method.bg-light,
.com-users-methods-list-method-image.bg-light,
.com-users-method-edit .bg-light,
.com-users-methods .bg-light {
    background-color: var(--nllm-surface-soft) !important;
    color: var(--nllm-text);
}

/* Method cards — Joomla's MFA list. Each method is a Bootstrap .card with
 * .bg-light + .border-secondary. Re-treat the entire card surface. */
.com-users-methods-list-method.card,
.com-users-method.card {
    background-color: var(--nllm-surface) !important;
    border-color: var(--nllm-surface-edge) !important;
    color: var(--nllm-text);
}

.com-users-methods-list-method-header.card-header,
.com-users-method-edit .card-header,
.card-header.border-secondary,
.card-header.bg-secondary {
    background-color: var(--nllm-surface-soft) !important;
    color: var(--nllm-text) !important;
    border-bottom: 1px solid var(--nllm-surface-edge);
}

.card-header.bg-secondary.text-white {
    /* Bootstrap's "active method" highlight — make it our violet so the
     * visual hierarchy survives the theme swap */
    background-color: var(--nllm-violet) !important;
    color: var(--nllm-text) !important;
    border-bottom-color: var(--nllm-violet-deep);
}

.com-users-methods-list-method-record.border-top,
.com-users-methods-list-method-addnew-container.border-top,
.com-users-method.border-top {
    border-top-color: var(--nllm-surface-soft) !important;
}

/* Buttons inside com_users — keep our violet primary, neutral secondary */
.com-users-profile__edit a.btn,
.com-users-profile__edit-submit button.btn,
.com-users-methods button.btn-outline-primary,
.com-users-methods-list-method-addnew.btn-outline-primary,
.com-users-method-edit button.btn,
.com-users-login__submit button.btn {
    border-radius: var(--nllm-radius-sm);
    font: inherit;
    padding: 0.55rem 1.1rem;
}

.com-users-profile__edit a.btn-primary,
.com-users-profile__edit-submit button.btn-primary,
.com-users-method-edit button.btn-primary {
    background-color: var(--nllm-violet);
    border-color: var(--nllm-violet);
    color: var(--nllm-text);
}

.com-users-profile__edit a.btn-primary:hover,
.com-users-profile__edit-submit button.btn-primary:hover,
.com-users-method-edit button.btn-primary:hover {
    background-color: var(--nllm-violet-deep);
    border-color: var(--nllm-violet-deep);
}

.com-users-methods button.btn-outline-primary,
.com-users-methods-list-method-addnew.btn-outline-primary {
    background-color: transparent;
    color: var(--nllm-violet-soft, var(--nllm-violet));
    border: 1px solid var(--nllm-violet);
}

.com-users-methods button.btn-outline-primary:hover,
.com-users-methods-list-method-addnew.btn-outline-primary:hover {
    background-color: var(--nllm-violet);
    color: var(--nllm-text);
}

.com-users-methods-list-method-record-delete.btn-danger {
    background-color: var(--nllm-danger, #c5283d);
    border-color: var(--nllm-danger, #c5283d);
    color: var(--nllm-text);
}

.com-users-methods-list-method-record-edit.btn-secondary {
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text);
    border: 1px solid var(--nllm-surface-edge);
}

/* Form controls — inputs, selects, textareas inside any com_users form */
.com-users-profile input[type="text"],
.com-users-profile input[type="email"],
.com-users-profile input[type="password"],
.com-users-profile input[type="url"],
.com-users-profile input[type="tel"],
.com-users-profile select,
.com-users-profile textarea,
.com-users-profile-edit input[type="text"],
.com-users-profile-edit input[type="email"],
.com-users-profile-edit input[type="password"],
.com-users-profile-edit select,
.com-users-profile-edit textarea,
.com-users-method-edit input,
.com-users-method-edit select,
.com-users-method-edit textarea,
.com-users-registration input,
.com-users-registration select,
.com-users-remind input,
.com-users-reset input,
.com-users-login input,
.com-users-login__form input {
    background-color: var(--nllm-surface);
    color: var(--nllm-text);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-sm);
    padding: 0.55rem 0.75rem;
    font: inherit;
}

.com-users-profile input::placeholder,
.com-users-profile-edit input::placeholder,
.com-users-method-edit input::placeholder,
.com-users-registration input::placeholder,
.com-users-login input::placeholder {
    color: var(--nllm-text-subtle);
}

/* Description/help text under fields (Joomla emits .form-text / .help-block /
 * a generic <small> after each field) */
.com-users-profile .form-text,
.com-users-profile-edit .form-text,
.com-users-method-edit .form-text,
.com-users-registration .form-text,
.com-users-profile small,
.com-users-method-edit small,
.com-users-profile-edit .help-block,
.com-users-method-edit .help-block {
    color: var(--nllm-text-muted);
    font-size: 0.85rem;
}

@media (max-width: 480px) {
    .com-users-profile,
    .com-users-profile-edit,
    .com-users-registration,
    .com-users-methods,
    .com-users-method-edit {
        padding-left: var(--nllm-space-sm);
        padding-right: var(--nllm-space-sm);
    }

    .com-users-profile__core,
    .com-users-profile__params,
    .com-users-profile__custom,
    .com-users-profile__multifactor {
        padding: var(--nllm-space-md);
    }
}