/* JUZKO LIBRARY v2 — additive stylesheet
 *
 * Loaded ALONGSIDE style.css (not instead). v2 reuses the existing
 * CSS variables (--bg-dark, --primary, etc.) and only adds rules
 * scoped to the .library-v2 body class. Anything not overridden falls
 * through to the classic style.css.
 *
 * Filled out per chunk:
 *   chunk 1 → preview banner + placeholder
 *   chunk 2 → topbar / module bar tweaks
 *   chunk 3 → grid / filter bar
 *   chunk 4 → self-drawer (most of the rules)
 */

body.library-v2 {
    /* Override the classic body's flex-center so v2 can use a
       top-down layout from chunk 2 onwards. */
    display: block;
    align-items: stretch;
    justify-content: stretch;
}

/* ===== Chunk 2: shell elements (module bar back-pill, disabled controls,
   shell notice card, toast, clickable wallet pills) ===== */

/* "← Classic" pill in module bar — discreet, gray, becomes red-ish on hover
   so user knows they're leaving the new UI. */
.v2-back-pill {
    background: var(--bg-badge) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    margin-left: 6px;
}
.v2-back-pill:hover {
    border-color: var(--warning) !important;
    color: var(--warning) !important;
}

/* Wallet pills: subtle hint that they're now clickable (chunk 3+ will
   open a wallet drawer). Pulse on hover only. */
body.library-v2 .v2-pill-clickable {
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
}
body.library-v2 .v2-pill-clickable:hover {
    transform: translateY(-1px);
    background: var(--bg-card-hover);
}

/* Disabled controls — buttons we render but haven't wired yet.
   Keep them visible (so user knows the layout) but obviously inactive. */
body.library-v2 .v2-disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Big friendly "shell ready" card filling the grid area in chunk 2 only.
   Replaced with the actual grid in chunk 3. */
.v2-shell-notice {
    grid-column: 1 / -1;        /* span the whole grid */
    max-width: 540px;
    margin: 60px auto;
    padding: 36px 32px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: 8px;
    text-align: center;
}
.v2-shell-notice .icon {
    font-size: 36px;
    margin-bottom: 8px;
}
.v2-shell-notice h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-main);
}
.v2-shell-notice p {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 10px;
}
.v2-shell-notice p.small { font-size: 11px; margin-top: 12px; }

/* ===== Chunk 3: quick-filter pills ===== */

/* Row of checkbox-pills below the main filter bar.
   Three toggles: Available only / My games / Hide busy bundles.
   State persists in localStorage via v2.js (key: juzko_v2_filters).

   Visually a sister card to .filter-bar — same bg/border/max-width,
   pulled up by a negative top-margin so it reads as a continuation
   rather than a stranded chip strip. */
.v2-quick-filters {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 8px 12px;
    margin: -1.25rem auto 2rem;
    max-width: var(--container-width);
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.v2-quick-filters::before {
    content: "Quick filters:";
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-right: 4px;
}

@media (max-width: 600px) {
    .v2-quick-filters::before { width: 100%; margin-bottom: 4px; }
    .v2-quick-filters { gap: 6px; }
    .v2-quick-toggle { padding: 4px 8px; font-size: 11px; }
}

.v2-quick-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.v2-quick-toggle:hover {
    border-color: var(--primary);
    color: var(--text-main);
}
.v2-quick-toggle input[type="checkbox"] {
    /* visually hidden but still accessible */
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
}
.v2-quick-toggle:has(input:checked) {
    background: rgba(88,166,255,0.15);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.v2-quick-toggle span {
    pointer-events: none;
}

/* Tiny non-blocking toast for "not wired yet" stubs. */
.v2-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 16px);
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 13px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}
.v2-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* "Try new UI" pill rendered in CLASSIC v1 module bar.
   Lives in v2.css for cohesion but doesn't require .library-v2 scope. */
.v2-try-btn {
    background: linear-gradient(90deg, rgba(88,166,255,0.18), rgba(88,166,255,0.08));
    border: 1px solid rgba(88,166,255,0.35);
    color: var(--primary);
    font-weight: 600;
}
.v2-try-btn:hover {
    background: linear-gradient(90deg, rgba(88,166,255,0.28), rgba(88,166,255,0.14));
    border-color: var(--primary);
}

/* ===== Chunk 4: self-drawer ===== */

/* Container reuses the same .drawer-overlay class as the existing
   profile-drawer (in style.css) — overlay styles already defined there. */

.self-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(440px, 95vw);
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    /* MUST sit above .drawer-overlay (9998) and the sticky topbar/module-bar
       (9999+). Match profile-drawer convention. */
    z-index: 10000;
    transform: translateX(0);
    transition: transform 0.25s ease;
    overflow-y: auto;
    box-shadow: -8px 0 24px rgba(0,0,0,0.4);
}
.self-drawer.closed { transform: translateX(100%); }

/* X button on the self-drawer — override style.css's profile-drawer
   variant (which positions on the LEFT). Self-drawer puts X on the right
   so the identity card avatar can sit on the left without overlap. */
.self-drawer .drawer-close-btn {
    top: 12px;
    left: auto;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    font-size: 22px;
    z-index: 1;
}

/* Reuse .drawer-close-btn from style.css (same one as profile-drawer). */

/* --- Identity card --- */
.self-identity {
    padding: 24px 20px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; gap: 14px; align-items: flex-start;
}
.self-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #58a6ff, #1f6feb);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 700; color: #fff;
    flex-shrink: 0; overflow: hidden;
    border: 2px solid var(--border);
}
.self-avatar img { width: 100%; height: 100%; object-fit: cover; }
.self-avatar.is-elite { border-color: var(--elite, #ffd700); box-shadow: 0 0 0 3px rgba(255,215,0,0.15); }

.self-info { flex: 1; min-width: 0; }
.self-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; color: var(--text-main); }
.self-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.self-badge {
    font-size: 10px; padding: 2px 8px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.self-badge.admin { background: rgba(255,71,87,0.15); color: #ff4757; border: 1px solid rgba(255,71,87,0.3); }
.self-badge.mod   { background: rgba(88,166,255,0.15); color: var(--primary); border: 1px solid rgba(88,166,255,0.3); }
.self-badge.elite { background: rgba(255,215,0,0.15); color: #ffd700; border: 1px solid rgba(255,215,0,0.3); }
.self-meta { font-size: 11px; color: var(--text-muted); }
.self-edit-link {
    display: inline-block; margin-top: 8px;
    font-size: 11px; color: var(--primary); text-decoration: none;
    border-bottom: 1px dotted var(--primary);
}
.self-edit-link:hover { color: var(--text-main); border-color: var(--text-main); }

/* --- Collapsible sections --- */
.self-section { border-bottom: 1px solid var(--border); }
.self-section.elite { background: rgba(255,215,0,0.03); }
.self-section-header {
    width: 100%;
    background: none; border: none; cursor: pointer;
    color: var(--text-main); text-align: left;
    padding: 14px 20px;
    display: flex; align-items: center;
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.self-section.elite .self-section-header { color: var(--elite, #ffd700); }
.self-section-header:hover { background: var(--bg-card-hover); }
.self-section-header .chev { color: var(--text-muted); transition: transform 0.2s; margin-left: auto; font-size: 18px; line-height: 1; }
.self-section.open .self-section-header .chev { transform: rotate(90deg); }
.self-section-body { padding: 4px 20px 18px; display: none; font-size: 13px; }
.self-section.open .self-section-body { display: block; }

/* --- Form rows --- */
.self-row { margin-bottom: 12px; }
.self-row label {
    display: block; font-size: 11px; color: var(--text-muted);
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px;
}
.self-row input, .self-row select {
    width: 100%; background: var(--bg-dark); border: 1px solid var(--border);
    color: var(--text-main); padding: 8px 10px; font-size: 13px;
    border-radius: 4px; font-family: inherit; box-sizing: border-box;
}
.self-row input:focus, .self-row select:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(88,166,255,0.15);
}

/* --- Live contact preview --- */
.self-preview {
    background: var(--bg-dark); border: 1px dashed var(--border);
    padding: 10px 12px; font-size: 12px; color: var(--text-muted);
    margin: 8px 0 12px; border-radius: 4px;
}
.self-preview-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.self-preview-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-badge); color: var(--text-main);
    padding: 4px 10px; border-radius: 4px; font-size: 12px;
}

/* --- Buttons --- */
.self-btn {
    background: var(--primary); color: #0a0a0a; border: none; cursor: pointer;
    padding: 8px 16px; font-size: 12px; font-weight: 700; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.self-btn:hover { background: #79b8ff; }
.self-btn.ghost {
    background: transparent; color: var(--text-muted); border: 1px solid var(--border);
    font-weight: 500; text-transform: none; letter-spacing: 0;
}
.self-btn.ghost:hover { border-color: var(--primary); color: var(--text-main); }
.self-btn.small { padding: 4px 10px; font-size: 11px; }

/* --- Wallet tiles --- */
.self-wallet-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 12px;
}
.self-wallet-tile {
    background: var(--bg-dark); border: 1px solid var(--border);
    padding: 12px; text-align: center; border-radius: 4px;
}
.self-wallet-tile .lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.self-wallet-tile .val { font-size: 22px; font-weight: 700; color: var(--text-main); margin-top: 4px; }
.self-wallet-tile.bank .val { color: var(--success); }

/* --- Wallet: transactions feed --- */
.self-tx-header {
    display: flex; align-items: center; justify-content: space-between;
    margin: 6px 0 8px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted);
}
.self-tx-header button { padding: 3px 8px; font-size: 14px; line-height: 1; }
.self-tx-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.self-tx-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; background: var(--bg-dark); border-radius: 4px;
    font-size: 12px;
}
.self-tx-icon { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; }
.self-tx-info { flex: 1; min-width: 0; }
.self-tx-desc {
    color: var(--text-main); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.self-tx-when { color: var(--text-muted); font-size: 10.5px; margin-top: 2px; }
.self-tx-amount { flex-shrink: 0; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.self-tx-amount.positive { color: var(--success); }
.self-tx-amount.negative { color: var(--danger); }

/* --- Quick actions list --- */
.self-quick-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.self-quick-actions .self-btn { text-align: left; }

/* --- 2FA status box --- */
.self-2fa-status {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--bg-dark);
    border: 1px solid rgba(255,215,0,0.2); border-radius: 4px;
    margin-bottom: 8px;
}
.self-2fa-status #2fa-status-text { flex: 1; font-size: 12px; }

/* --- Generic stub paragraph --- */
.self-stub { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.self-stub.small { font-size: 11px; }
.self-stub.muted { color: var(--text-muted); }
.muted { color: var(--text-muted); }

/* --- Wallet: buy-invite block (non-admin) ---
   Lets a regular user mint one invite code in exchange for 500 JK from the
   bank. Lives in the Wallet section below the transactions feed. */
.self-invite-buy {
    margin-top: 14px;
    padding: 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.self-invite-buy-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 600; color: var(--text-main);
    margin-bottom: 4px;
}
.self-invite-buy-cost {
    font-variant-numeric: tabular-nums;
    color: var(--warning);
    font-size: 12px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.25);
    padding: 2px 8px;
    border-radius: 4px;
}
.self-invite-buy .self-btn { margin-top: 8px; width: 100%; }
.self-invite-result {
    margin-top: 10px;
    padding: 10px;
    background: rgba(76, 175, 80, 0.06);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 4px;
}
.self-invite-result.hidden { display: none; }
.self-invite-code-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.self-invite-code-row .lbl {
    font-size: 10px; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: 0.5px;
    flex-basis: 100%;
}
.self-invite-code {
    flex: 1;
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--success);
    background: rgba(0, 0, 0, 0.25);
    padding: 6px 10px;
    border-radius: 4px;
    user-select: all;
    cursor: text;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ============================================================
   FAZA 4 — Self-drawer activity lists (My games / Borrowed / Lent)
   Populated by loadSelfActivity() in v2.js from
   /api/library.php?action=get_self_activity. Three flavours of
   row share most styling; only the status-pill colour changes.
   ============================================================ */

/* Count badge sitting next to the section title in the header.
   Renders as a slim pill so it doesn't compete with the chevron. */
.self-count {
    background: var(--bg-badge);
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
    min-width: 18px;
    text-align: center;
}
.self-count.has-overdue {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger, #ef4444);
    border-color: rgba(239, 68, 68, 0.4);
}

/* Wrapper around list rows — gives a tiny breathing space between rows
   without using vertical margins (so first/last row don't drift). */
.self-list { display: flex; flex-direction: column; gap: 6px; }

/* Each row: cover thumb on the left, title + meta in the middle,
   status pill / action buttons on the right. */
.self-game-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    min-height: 56px;
}
.self-game-row .thumb {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 4px; overflow: hidden;
    background: var(--bg-card);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.self-game-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.self-game-row .body { flex: 1; min-width: 0; }
.self-game-row .title {
    color: var(--text-main); font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.self-game-row .meta {
    color: var(--text-muted); font-size: 10.5px; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.self-game-row .meta a { color: var(--primary); text-decoration: none; }
.self-game-row .meta a:hover { text-decoration: underline; }
.self-game-row .actions {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
    flex-shrink: 0;
}

/* Status pills (game state on the My games list, due-date state on rentals). */
.self-status-pill {
    display: inline-block;
    font-size: 9.5px;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.self-status-pill.available { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.35); }
.self-status-pill.borrowed  { background: rgba(88,166,255,0.15); color: var(--primary); border: 1px solid rgba(88,166,255,0.35); }
.self-status-pill.hold      { background: rgba(247,185,85,0.15); color: #f7b955; border: 1px solid rgba(247,185,85,0.35); }
.self-status-pill.cooldown  { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.35); }
.self-status-pill.due-soon  { background: rgba(247,185,85,0.15); color: #f7b955; border: 1px solid rgba(247,185,85,0.35); }
.self-status-pill.overdue   {
    background: rgba(239,68,68,0.18);
    color: var(--danger, #ef4444);
    border: 1px solid rgba(239,68,68,0.45);
    animation: self-overdue-pulse 1.8s ease-in-out infinite;
}
.self-status-pill.on-time   { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }

@keyframes self-overdue-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0.18); }
}

/* Tiny inline action button on rental rows (Return / Contact). */
.self-row-btn {
    background: var(--bg-card); color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 3px 8px; font-size: 10.5px;
    border-radius: 3px; cursor: pointer;
    font-weight: 600; letter-spacing: 0.2px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.self-row-btn:hover { border-color: var(--primary); color: var(--text-main); background: var(--bg-card-hover); }
.self-row-btn.primary { background: var(--primary); color: #0a0a0a; border-color: var(--primary); }
.self-row-btn.primary:hover { background: #79b8ff; color: #000; }
.self-row-btn.danger  { color: var(--danger, #ef4444); border-color: rgba(239,68,68,0.35); }
.self-row-btn.danger:hover { background: rgba(239,68,68,0.12); border-color: var(--danger, #ef4444); }

/* Empty state inside a list. */
.self-list-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 12px 8px;
    background: var(--bg-dark);
    border: 1px dashed var(--border);
    border-radius: 4px;
}

/* Tight responsive squeeze for narrow phones (≈320px). */
@media (max-width: 360px) {
    .self-game-row { gap: 8px; padding: 6px 8px; }
    .self-game-row .thumb { width: 34px; height: 34px; }
    .self-game-row .title { font-size: 12px; }
    .self-game-row .meta  { font-size: 10px; }
    .self-status-pill { font-size: 9px; padding: 1px 6px; }
    .self-row-btn { font-size: 10px; padding: 2px 6px; }
}

/* ==================== Rank-coloured avatar frames ====================
   Mirrors the forum's system (style.css). The .self-identity wrapper in
   library_v2.php gets a .user-rank-{admin,mod,elite,user} class from PHP,
   which sets --rank-color; .self-avatar picks it up via border-color.

   Precedence: Elite > Admin > Mod > User (matches user_badge() in
   includes/functions.php).
   =====================================================================*/
:root {
    --rank-color-admin: var(--danger);  /* red    #f87171 */
    --rank-color-mod:   var(--accent);  /* blue   #58a6ff */
    --rank-color-elite: #ffd700;        /* gold */
    --rank-color-user:  var(--border);
}

.user-rank-admin { --rank-color: var(--rank-color-admin); }
.user-rank-mod   { --rank-color: var(--rank-color-mod);   }
.user-rank-elite { --rank-color: var(--rank-color-elite); }
.user-rank-user  { --rank-color: var(--rank-color-user);  }

/* Drawer identity avatar — override the default border colour. The legacy
   .self-avatar.is-elite rule above still adds the gold halo; here we just
   colour the ring per rank for everyone (Elite included). */
.user-rank-admin .self-avatar,
.user-rank-mod   .self-avatar,
.user-rank-elite .self-avatar,
.user-rank-user  .self-avatar {
    border-color: var(--rank-color, var(--border));
}
/* Soft halo for elites to match the badge premium feel (kept consistent
   with .self-avatar.is-elite). */
.user-rank-elite .self-avatar {
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15);
}

/* Profile card avatar wrapper — replaces the old inline `display:inline-block`.
   Lives on the <div> emitted by avatar_rank_attrs($user, 'profile-avatar-frame'). */
.profile-avatar-frame {
    display: inline-block;
    line-height: 0; /* avoid the extra baseline gap under the rounded <img> */
}

/* Custom-group users (display_group_id set) — colour is delivered inline as
   `--rank-color: #xxx` by avatar_rank_attrs(). This class exists so we can
   add optional polish (e.g. subtle halo) without per-group selectors. */
.user-rank-group {
    /* Tint the avatar ring with a low-alpha halo of the group colour. */
}
.user-rank-group .post-author-avatar,
.user-rank-group .profile-avatar,
.user-rank-group .self-avatar {
    /* color-mix is widely supported in evergreen browsers; falls back to
       a flat ring on older Safari/Chromium without breaking layout. */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rank-color) 18%, transparent);
}

/* ==================== Wallet transactions — accent stripe ====================
   Replaces the per-type emoji icons that used to sit on the left of each
   row. The row gets a coloured 3px stripe via border-left, driven by
   data-type emitted by renderTxRow() in v2.js. Clean, scannable, no
   wallet-style emoji parade.
   =============================================================================*/

/* Default (any unknown type or no data-type at all) — neutral border. */
.self-tx-row {
    border-left: 3px solid var(--border);
    padding-left: 10px; /* compensate so text doesn't crowd the stripe */
}

/* Spend (debit) — red */
.self-tx-row[data-type="borrow"]     { border-left-color: var(--danger); }

/* Income (credit) — green */
.self-tx-row[data-type="lend"]       { border-left-color: var(--success); }
.self-tx-row[data-type="add"]        { border-left-color: var(--success); }

/* Late-fee bonus on return — gold (warning hue) */
.self-tx-row[data-type="lend_extra"] { border-left-color: var(--warning); }

/* Like — primary blue, the same accent the rest of the UI uses for "social" */
.self-tx-row[data-type="like"]       { border-left-color: var(--primary); }

/* Legacy icon span — JS no longer emits it, but the class lingered in
   places we might've cached. Hard-hide so nothing leaks back through. */
.self-tx-icon { display: none !important; }