/*  Page theme tokens  */
    :root {
        --brand:      var(--primary-color, var(--primary, #5a7a6a));
        --brand-dark: var(--primary-dark, #3d5a4a);
        --brand-soft: var(--primary-soft, #eef3f0);
        --surface:    var(--card-bg, #ffffff);
        --page-bg:    var(--light-color, #f3f6f8);
        --border:     var(--line, #e2e8f0);
        --text-muted: var(--muted, #64748b);
        --text-dark:  var(--text-color, #1e293b);
    }

    body { background: var(--page-bg); }

    /*  Section wrapper  */
    .md-wrapper { max-width: 1200px; margin: 0 auto; }

    /*  Back link  */
    .back-link {
        color: var(--text-muted);
        text-decoration: none;
        font-size: .875rem;
        transition: color .2s;
    }
    .back-link:hover { color: var(--brand); }

    /*  Brand button  */
    .btn-brand {
        background: var(--brand);
        color: var(--on-primary, #fff);
        border: none;
        transition: background .2s;
    }
    .btn-brand:hover { background: var(--brand-dark); color: var(--on-primary, #fff); }

    /*  Profile card  */
    .profile-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 1rem;
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }

    /* ── NEW compact header layout ── */
    .member-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
    }

    /* Left block: name + badge */
    .member-header-left {}
    .member-name {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text-dark);
        margin: 0 0 .25rem;
        line-height: 1.2;
    }

    /* Badge pill */
    .badge-level {
        background: var(--brand-soft);
        color: var(--brand);
        font-size: .7rem;
        font-weight: 700;
        border-radius: 999px;
        padding: .2em .75em;
        text-transform: uppercase;
        letter-spacing: .04em;
        border: 1px solid var(--brand);
        vertical-align: middle;
        margin-left: .35rem;
    }

    /* Middle info strip */
    .member-info-strip {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 0;
        flex: 1;
        justify-content: center;
        padding: 0 1rem;
    }
    .info-cell {
        padding: 0 1.25rem;
        border-right: 1px solid var(--border);
    }
    .info-cell:first-child { border-left: 1px solid var(--border); }
    .info-cell-label {
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: .1rem;
    }
    .info-cell-value {
        font-size: .9rem;
        font-weight: 500;
        color: var(--text-dark);
    }

    /* Right block: current balance */
    .member-header-right {
        text-align: right;
        flex-shrink: 0;
    }
    .balance-label {
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: .1rem;
    }
    .balance-value {
        font-size: 2rem;
        font-weight: 800;
        color: var(--brand);
        line-height: 1.1;
    }

    /* Fix tab text readability (overrides global .nav-link which makes all links white) */
    .nav-tabs .nav-link {
        color: var(--text-muted, #6c757d) !important;
    }
    .nav-tabs .nav-link:hover {
        color: var(--text-dark, #212529) !important;
    }
    .nav-tabs .nav-link.active {
        color: var(--brand, var(--primary-color)) !important;
        font-weight: 600;
    }
    /* ── /NEW  ── */


    /*  Tab panels  */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /*  Transaction table  */
    .txn-table th {
        font-size: .75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text-muted);
        background: var(--soft, #f8fafc);
        border-bottom: 1px solid var(--border);
        padding: .75rem 1rem;
    }
    .txn-table td {
        font-size: .875rem;
        color: var(--text-dark);
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }
    .txn-table tr:last-child td { border-bottom: none; }
    .txn-table tr:hover td { background: var(--hover-row, #fafcfd); }

    /*  Amount colours  */
    .amt-credit { color: var(--success, #16a34a); font-weight: 700; }
    .amt-debit  { color: var(--danger, #dc2626); font-weight: 700; }

    /*  Type badge  */
    .type-badge {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        font-size: .75rem;
        font-weight: 600;
        border-radius: .375rem;
        padding: .2em .6em;
    }
    .type-badge.topup      { background: var(--success-bg, #dcfce7); color: var(--success-text, #15803d); }
    .type-badge.redemption { background: var(--danger-bg, #fee2e2); color: var(--danger-text, #b91c1c); }

    /*  Notes list  */
    .note-card {
        background: var(--soft, #f8fafc);
        border: 1px solid var(--border);
        border-radius: .5rem;
        padding: 1rem;
        font-size: .875rem;
        color: var(--text-dark);
    }

    /*  Skeleton loader  */
    .skeleton {
        display: inline-block;
        background: linear-gradient(90deg, var(--line, #e2e8f0) 25%, var(--soft, #f1f5f9) 50%, var(--line, #e2e8f0) 75%);
        background-size: 400% 100%;
        animation: shimmer 1.4s ease infinite;
        border-radius: .25rem;
    }
    @keyframes shimmer { to { background-position: -400% 0; } }

    /* responsive strip */
    @media (max-width: 640px) {
        .member-info-strip { justify-content: flex-start; padding: .5rem 0 0; }
        .info-cell:first-child { border-left: none; }
        .member-header-right { text-align: left; }
    }

/* Hide customer name + phone subtitle — redundant on member's own page */
    #panel-history .activity-subtitle { display: none !important; }