/*
 * tweaks.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Load order: main.css → tweaks.css → color.php → sidebar.css → header.css
 *
 * Responsibilities:
 *  1. ALL CSS custom properties (base colour scale + dashboard shell tokens)
 *  2. Override main.css .dashboard { background: #7917e7 } which paints the
 *     entire dashboard wrapper purple — header.css then sets the header's own bg
 *  3. Bootstrap modal / body-overlay fixes
 *  4. Component styles (glass card, tables, vault, analytics, etc.)
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   color.php sets --base-h/s/l. Everything else derives from those three.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Base colour computed scale ────────────────────────────────────────
       main.css uses --base-d-200, --base-l-300, etc. in hover states and
       gradients. Without these, those rules produce empty hsl() values
       (invisible output). They MUST be defined AFTER color.php sets
       --base-h/s/l, but since CSS custom properties are lazy-evaluated,
       defining them here (before color.php loads) works fine.
    ── */
    --base-d-100: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.10);
    --base-d-200: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.20);
    --base-d-300: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.30);
    --base-d-400: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.40);
    --base-d-500: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.50);
    --base-l-100: var(--base-h) var(--base-s) calc(var(--base-l) + (100% - var(--base-l)) * 0.10);
    --base-l-200: var(--base-h) var(--base-s) calc(var(--base-l) + (100% - var(--base-l)) * 0.20);
    --base-l-300: var(--base-h) var(--base-s) calc(var(--base-l) + (100% - var(--base-l)) * 0.30);
    --base-l-400: var(--base-h) var(--base-s) calc(var(--base-l) + (100% - var(--base-l)) * 0.40);
    --base-l-500: var(--base-h) var(--base-s) calc(var(--base-l) + (100% - var(--base-l)) * 0.50);

    /* ── Dashboard shell tokens ────────────────────────────────────────────
       Used by sidebar.css, header.css, and the inline layout style in
       ap.blade.php. Previously inline; moved here so they are cached.
    ── */
    --dash-surface:   #0f0b1e;
    --dash-raise:     #151025;
    --dash-lift:      rgba(255,255,255,0.07);
    --dash-border:    rgba(255,255,255,0.07);
    --dash-border-hi: rgba(255,255,255,0.14);
    --brand:          #7917e7;
    --brand-soft:     rgba(121,23,231,0.15);
    --brand-glow:     rgba(121,23,231,0.4);
    --brand-light:    #9f44d3;
    --dash-silver:    #9490a8;
    --dash-muted:     #4e4a62;
    --dash-green:     #3ecf8e;
    --dash-red:       #e05555;
    --sidebar-w:      260px;
    --header-h:       64px;
    --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
    --heading-font:   "Chakra Petch", sans-serif;

    /* ── Component tokens ──────────────────────────────────────────────────
       Used by glass card, analytics cards, tables, buttons.
    ── */
    --bg-base:       #0c0617;
    --bg-card:       rgba(255,255,255,0.04);
    --bg-highlight:  rgba(255,255,255,0.07);
    --border-subtle: rgba(255,255,255,0.06);
    --border-mid:    rgba(255,255,255,0.10);
    --green:         #39ff88;
    --red:           #ff4d4d;
    --text-muted:    #9999b0;
    --text-main:     #ffffff;
    --radius-card:   20px;
    --radius-btn:    12px;
    --radius-sm:     8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. PAGE BASE
   ═══════════════════════════════════════════════════════════════════════════ */
html { overflow-x: hidden; }

body {
    background: radial-gradient(circle at top left, #1b0f2f, #0c0617) !important;
    min-height: 100%;
    color:      #fff;
}

*, *::before, *::after { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. KILL THE main.css PURPLE DASHBOARD BACKGROUND
   ──────────────────────────────────────────────────────────────────────────
   main.css rule (confirmed from source document):
       .dashboard { background-color: #7917e7; position:sticky; top:0; z-index:9; }
   This paints the entire .dashboard wrapper div bright purple.
   The header (position:fixed) must then paint over it with its own opaque bg.
   We also strip position:sticky and z-index:9 from the wrapper so it doesn't
   interfere with fixed children.
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard {
    background-color: transparent !important;
    background:       transparent !important;
    position:         relative    !important; /* not sticky — that was the header */
    top:              auto        !important;
    z-index:          auto        !important;
    border-radius:    0           !important;
    padding:          0           !important;
}

/* Also reset __right and __inner in case they inherited anything */
.dashboard__right,
.dashboard__inner,
.dashboard-body {
    background-color: transparent !important;
    background:       transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. BODY OVERLAY — KILLED
   main.js toggles .body-overlay.show and blocks all clicks at z-index:99.
   CSS rule alone is sufficient; no MutationObserver needed.
   ═══════════════════════════════════════════════════════════════════════════ */
.body-overlay,
.body-overlay.show {
    display:        none    !important;
    visibility:     hidden  !important;
    opacity:        0       !important;
    pointer-events: none    !important;
    z-index:        -1      !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. BOOTSTRAP MODAL FIXES
   ─────────────────────────────────────────────────────────────────────────
   Original tweaks.css had backdrop-filter on .modal-content which creates
   a new stacking context and traps pointer events inside it.
   Original .modal-backdrop.show had opacity:0.9 = effectively solid black.
   ═══════════════════════════════════════════════════════════════════════════ */
.modal               { z-index: 1055 !important; }
.modal-backdrop      { background-color: #000 !important; z-index: 1050 !important; }
.modal-backdrop.show { opacity: 0.55 !important; }

.modal-content {
    /* NO backdrop-filter — creates stacking context that traps clicks */
    background:    #0f0b1e !important;
    border-radius: 14px;
    border:        1px solid rgba(121,23,231,0.25);
    color:         #e8e4f0;
    box-shadow:    0 24px 64px rgba(0,0,0,0.85);
}
.modal-header { border-bottom: 1px solid rgba(255,255,255,0.07); background: transparent; }
.modal-title  { font-weight: 600; font-size: 17px; color: #fff; }
.modal-body   { padding: 20px; background: transparent; color: #e8e4f0; }
.modal-footer { border-top: 1px solid rgba(255,255,255,0.07); background: transparent; }

.modal-header .close {
    background:      rgba(255,255,255,0.05);
    border:          1px solid rgba(255,255,255,0.1);
    width:           34px; height: 34px;
    border-radius:   9px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    opacity:         1;
    transition:      background 0.2s, transform 0.2s;
}
.modal-header .close:hover { background: #7b2ff7; transform: rotate(90deg); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. LIST GROUP (was solid purple from Bootstrap + main.css)
   ═══════════════════════════════════════════════════════════════════════════ */
.list-group-item {
    background:    transparent !important;
    border:        none;
    margin-bottom: 2px;
    border-radius: var(--radius-sm) !important;
    color:         #e8e4f0;
}
.list-group-item span   { font-size: 13px; }
.list-group-item strong { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. GLASS CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.glass-card {
    background:    rgba(255,255,255,0.04);
    border-radius: var(--radius-card);
    border:        1px solid rgba(255,255,255,0.06);
    padding:       24px;
    overflow:      hidden;
    position:      relative;
}
.glass-card::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     radial-gradient(circle at top right, rgba(123,47,247,0.1), transparent 60%);
    pointer-events: none;
}
.card-section {
    padding:         18px 22px;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             16px;
}
.card-section + .card-section { border-top: 1px solid var(--border-subtle); }
.section-highlight             { background: var(--bg-highlight); }

/* custom--card reset (main.css paints it with a gradient) */
.custom--card {
    border:        1px solid rgba(255,255,255,0.07) !important;
    background:    rgba(255,255,255,0.04)           !important;
    border-radius: 16px;
    overflow:      hidden;
}
.custom--card .card-body { padding: 18px; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn { border-radius: var(--radius-btn); white-space: nowrap; }

.btn--base {
    background:    linear-gradient(135deg, #7b2ff7, #9f44d3) !important;
    color:         #fff   !important;
    font-weight:   600;
    border-radius: 10px;
    border:        none;
    transition:    transform 0.2s, box-shadow 0.2s;
}
.btn--base:hover {
    transform:  translateY(-2px)                  !important;
    box-shadow: 0 10px 28px rgba(123,47,247,0.4)  !important;
    color:      #fff                              !important;
}
.btn--base:active { transform: scale(0.97) !important; }

.btn-neutral {
    background:    rgba(255,255,255,0.06);
    border:        1px solid rgba(255,255,255,0.10);
    color:         #cfcfe6;
    border-radius: 9px;
    transition:    background 0.2s, color 0.2s;
}
.btn-neutral:hover { background: rgba(255,255,255,0.1); color: #fff; }

.btn-active-state      { background: linear-gradient(90deg,#16a34a,#22c55e); border:none; color:#fff; border-radius:9px; }
.btn-finished-state    { background: linear-gradient(90deg,#5f8dff,#7c00ff); border:none; color:#fff; border-radius:9px; }
.btn-deactivated-state { background: linear-gradient(90deg,#ff4b5c,#ff2e43); border:none; color:#fff; border-radius:9px; }

/* ═══════════════════════════════════════════════════════════════════════════
   9. FORMS
   ═══════════════════════════════════════════════════════════════════════════ */
.form--label { font-size: 13px; color: #aaa; margin-bottom: 6px; }
.form--control {
    background:    rgba(255,255,255,0.05);
    border:        1px solid rgba(255,255,255,0.09);
    color:         #fff;
    border-radius: 10px;
    height:        45px;
}
.form--control:focus {
    border-color: var(--brand);
    box-shadow:   0 0 0 3px rgba(121,23,231,0.2);
    background:   rgba(255,255,255,0.07);
    color:        #fff;
    outline:      none;
}
.form--control::placeholder { color: #666; }

.input-group-text {
    background: rgba(255,255,255,0.05);
    border:     1px solid rgba(255,255,255,0.09);
    color:      #fff;
}

.referral-input {
    background:    rgba(255,255,255,0.04) !important;
    border:        1px solid rgba(255,255,255,0.1) !important;
    color:         #fff  !important;
    border-radius: 10px;
    min-height:    44px;
}
.referral-input:focus {
    border-color: rgba(121,23,231,0.6)              !important;
    box-shadow:   0 0 0 3px rgba(121,23,231,0.15)   !important;
    outline:      none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. TABLES
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Shared thead style */
.mandates-table thead th,
.recent-transactions-table thead th,
.deposit-table thead th {
    color:         var(--text-muted);
    font-size:     13px;
    font-weight:   600;
    border-bottom: 1px solid var(--border-mid);
    white-space:   nowrap;
    padding:       12px 10px;
}

/* Shared tbody row separator */
.mandates-table tbody tr:not(:last-child) td,
.recent-transactions-table tbody tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,0.04); }

/* Shared td padding */
.mandates-table td,
.recent-transactions-table td { vertical-align: middle; padding: 12px 10px; }

/* Mandates column widths */
.mandates-table { width: 100%; table-layout: fixed; margin-bottom: 0; }
.mandates-table th:nth-child(1), .mandates-table td:nth-child(1) { width: 48%; }
.mandates-table th:nth-child(2), .mandates-table td:nth-child(2) { width: 24%; }
.mandates-table th:nth-child(3), .mandates-table td:nth-child(3) { width: 28%; text-align: center; }
.mandate-name  { font-weight: 500; white-space: normal !important; line-height: 1.35; word-break: break-word; }
.action--btns  { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Deposit table */
.deposit-table thead th { padding: 13px 12px; }
.deposit-table tbody td { padding: 13px 12px; vertical-align: middle; border-bottom: 1px solid rgba(255,255,255,0.05); }
.deposit-table tbody tr:last-child td { border-bottom: none; }

/* Running mandates / active nodes / transaction history */
.running-mandates-card .card-body,
.active-nodes-card .card-body,
.transaction-history-card .card-body { padding: 1rem 1.25rem; }

.running-mandates-table th, .running-mandates-table td,
.active-nodes-table th, .active-nodes-table td,
.transaction-history-table th, .transaction-history-table td { vertical-align: middle; }

.status-wrap  { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mandate-toggle { display: flex; gap: 8px; flex-wrap: wrap; }

/* Icon buttons */
.icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }

.info-circle-btn {
    width: 30px !important; height: 30px !important;
    border: 1px solid rgba(182,103,255,0.4) !important;
    border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    color: #fff !important; background: transparent !important;
    text-decoration: none !important; padding: 0 !important;
    transition: all 0.18s !important;
}
.info-circle-btn:hover {
    background: rgba(182,103,255,0.12) !important;
    border-color: rgba(182,103,255,0.85) !important;
    box-shadow: 0 0 10px rgba(182,103,255,0.3) !important;
}

.table-search { margin-bottom: 14px; }
.table-search .input-group { max-width: 360px; width: 100%; margin-left: auto; }

.mandate-footer-actions { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.footer-action-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 8px; min-width: 110px; height: 38px;
    padding: 0 14px !important; border-radius: 9px !important; text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. VAULT / STATS
   ═══════════════════════════════════════════════════════════════════════════ */
.stats-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.stats-summary-item small { display: block; color: var(--text-muted); margin-bottom: 6px; font-size: 13px; }
.stats-summary-item h5    { margin: 0; font-size: 21px; font-weight: 600; word-break: break-word; }
.stats-summary-item-right { text-align: right; padding-left: 16px; border-left: 1px solid var(--border-subtle); }

.vault-content  { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }
.vault-info     { max-width: 65%; }
.cvault-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.cvault-actions .btn { flex: 0 0 auto; }

.live-dot { width: 8px; height: 8px; background: #39ff88; border-radius: 50%; animation: ldPulse 1.5s ease infinite; }
@keyframes ldPulse { 0%,100% { transform:scale(1);opacity:1; } 50% { transform:scale(1.4);opacity:0.6; } }

.vault-balance {
    font-size: 22px; font-weight: 700;
    background: linear-gradient(135deg, #7b2ff7, #39ff88);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.progress-bar-wrap { width:100%; height:6px; background:rgba(255,255,255,0.05); border-radius:20px; overflow:hidden; margin-top:4px; }
.progress-fill { height:100%; background:linear-gradient(90deg,#7b2ff7,#39ff88); transition:width 0.6s ease; }
.vault-insight { background:rgba(123,47,247,0.1); border-left:3px solid #7b2ff7; padding:10px 14px; border-radius:10px; font-size:13px; color:#ccc; }
.vault-card { box-shadow:0 20px 56px rgba(0,0,0,0.55); transition:transform 0.25s; }
.vault-card:hover { transform:translateY(-4px); }

/* ═══════════════════════════════════════════════════════════════════════════
   12. LIVE TRADING FEED
   ═══════════════════════════════════════════════════════════════════════════ */
.trade-card { background:rgba(255,255,255,0.03); border-radius:var(--radius-card); padding:20px; border:1px solid var(--border-mid); overflow:hidden; }
.trade-header { font-size:14px; font-weight:600; letter-spacing:0.05em; margin-bottom:10px; }
.trade-feed   { height:350px; width:100%; overflow:hidden; }
.trade-row, .trade-head { display:grid; grid-template-columns:0.95fr 1fr 0.82fr 1fr 0.62fr 1.1fr; gap:8px; width:100%; padding:8px 0; font-size:12px; align-items:center; }
.trade-row  { border-bottom:1px solid var(--border-subtle); }
.trade-head { color:#666; border-bottom:1px solid var(--border-mid); margin-bottom:5px; }
.trade-row > div, .trade-head > div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.green { color: var(--green); }
.red   { color: var(--red); }
@keyframes buyFlash  { 0% { background:rgba(0,255,120,0.2); } 100% { background:transparent; } }
@keyframes sellFlash { 0% { background:rgba(255,50,50,0.2);  } 100% { background:transparent; } }
.flash-buy  { animation:buyFlash  0.7s ease; }
.flash-sell { animation:sellFlash 0.7s ease; }

/* ═══════════════════════════════════════════════════════════════════════════
   13. ANALYTICS
   ═══════════════════════════════════════════════════════════════════════════ */
.analytics-section-title { font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--brand-light); margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.analytics-section-title::after { content:''; flex:1; height:1px; background:var(--border-subtle); }

.insight-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.insight-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:16px; padding:16px; position:relative; overflow:hidden; transition:border-color 0.25s,transform 0.25s; }
.insight-card:hover { border-color:rgba(123,47,247,0.4); transform:translateY(-2px); }
.insight-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-light)); }
.insight-card .ic-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }
.insight-card .ic-value { font-size:19px; font-weight:700; line-height:1.15; margin-bottom:6px; word-break:break-word; }
.insight-card .ic-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 7px; border-radius:20px; font-weight:600; }
.ic-badge.positive { background:rgba(57,255,136,0.12); color:var(--green); }
.ic-badge.neutral  { background:rgba(255,255,255,0.08); color:#bbb; }
.ic-badge.negative { background:rgba(255,77,77,0.12);  color:var(--red); }

.analytics-chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.analytics-chart-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:16px; padding:20px; }
.analytics-chart-card h6 { font-size:13px; font-weight:600; color:#ccc; margin-bottom:4px; }
.analytics-chart-card .chart-sub { font-size:11px; color:var(--text-muted); margin-bottom:16px; }
.analytics-chart-card canvas { max-height:180px; }

.projection-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.proj-item { background:rgba(123,47,247,0.08); border:1px solid rgba(123,47,247,0.2); border-radius:14px; padding:16px; text-align:center; }
.proj-item .proj-label { font-size:11px; color:var(--text-muted); margin-bottom:6px; }
.proj-item .proj-value { font-size:21px; font-weight:700; color:#fff; }
.proj-item .proj-note  { font-size:10px; color:var(--brand-light); margin-top:4px; }

.yield-score-wrap { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; padding:10px 0; }
.yield-score-wrap .ys-val { font-size:34px; font-weight:700; line-height:1; background:linear-gradient(135deg,var(--brand),var(--green)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.yield-score-wrap .ys-label { font-size:12px; color:var(--text-muted); }

.referral-stat-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-subtle); }
.referral-stat-row:last-child { border-bottom:none; }
.referral-stat-row .rs-label { font-size:13px; color:#ccc; }
.referral-stat-row .rs-val   { font-size:14px; font-weight:600; }

.insight-callout { background:rgba(123,47,247,0.08); border-left:3px solid var(--brand); border-radius:0 12px 12px 0; padding:12px 16px; font-size:13px; color:#ccc; line-height:1.55; margin-top:16px; }
.insight-callout strong { color:#fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   14. REFERRAL / MISC
   ═══════════════════════════════════════════════════════════════════════════ */
.copy-success { opacity:0; font-size:13px; color:var(--green); margin-top:10px; transition:opacity 0.35s,transform 0.35s; transform:translateY(8px); }
.copy-success.show { opacity:1; transform:translateY(0); }
.section-title { font-size:25px; font-weight:600; }
.muted         { color:#9ca3af; }
.icon-circle   { width:58px; height:58px; border-radius:50%; background:#f5c156; display:flex; align-items:center; justify-content:center; font-size:21px; overflow:hidden; }
.icon-circle img { max-width:100%; max-height:100%; object-fit:contain; }

.level-box { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:17px; margin-bottom:14px; cursor:pointer; transition:all 0.22s; }
.level-box:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,0.3); }
.level-box.active { border-color:#f5c156; box-shadow:0 0 10px rgba(245,193,86,0.4); }
.level-header { display:flex; justify-content:space-between; align-items:center; }
.level-stats  { display:flex; justify-content:space-between; margin-top:10px; }
.stat-label   { display:block; font-size:12px; color:#9aa4af; }
.stat-value   { font-weight:600; font-size:15px; }
.level-1 { border-left:4px solid #22c55e; }
.level-2 { border-left:4px solid #3b82f6; }
.level-3 { border-left:4px solid #a855f7; }
.level-4 { border-left:4px solid #f97316; }
.level-5 { border-left:4px solid #facc15; }

.commission-card { text-align:center; padding:15px; border-radius:10px; border:1px solid rgba(255,255,255,0.1); }
.milestone-card  { background:linear-gradient(145deg,#0f141a,#1b2430); border-radius:16px; padding:24px; border:1px solid rgba(255,255,255,0.08); }
.milestone-card.next { border:1px solid rgba(255,193,7,0.5); }
.milestone-progress  { height:10px; border-radius:20px; }
.reward-box { background:rgba(255,193,7,0.14); border:1px solid rgba(255,193,7,0.5); padding:10px 14px; border-radius:10px; margin-top:10px; }
.milestone-benefits { margin-top:14px; padding-left:0; list-style:none; }
.milestone-benefits li { margin-bottom:6px; color:#9aa4af; }
.milestone-amount { font-size:34px; font-weight:700; }

hr { border-color:rgba(255,255,255,0.08); }

/* ═══════════════════════════════════════════════════════════════════════════
   15. MOBILE MENU — slide-in panel (≤992px)
   Shell (.mobile-menu, .mobile-overlay) is styled in ap.blade.php inline <style>.
   All inner content classes are defined here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Top bar: brand wordmark + close button ── */
.mobile-menu-top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 20px 16px;
    border-bottom:   1px solid rgba(255,255,255,0.07);
    flex-shrink:     0;
}

.mobile-menu-brand {
    font-family:    var(--heading-font, 'Chakra Petch', sans-serif);
    font-size:      20px;
    font-weight:    700;
    letter-spacing: 0.05em;
    color:          #fff;
}
.mobile-menu-brand span { color: var(--brand-light, #9f44d3); }

.mobile-close {
    width:           34px;
    height:          34px;
    border-radius:   8px;
    background:      rgba(255,255,255,0.06);
    border:          1px solid rgba(255,255,255,0.08);
    color:           #9490a8;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       15px;
    cursor:          pointer;
    flex-shrink:     0;
    transition:      background 0.2s, color 0.2s;
}
.mobile-close:hover { background: rgba(224,85,85,0.15); color: #e05555; }

/* ── User identity block ── */
.mobile-user {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.mobile-user-avatar {
    position:        relative;
    width:           44px;
    height:          44px;
    flex-shrink:     0;
    border-radius:   50%;
    background:      linear-gradient(135deg, #3a2060, var(--brand, #7917e7));
    border:          2px solid rgba(121,23,231,0.4);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       16px;
    color:           #fff;
}

.mobile-user-online {
    position:      absolute;
    bottom:        1px;
    right:         1px;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    #39ff88;
    border:        2px solid #0f0b1e;
}

.mobile-user-name {
    font-size:   15px;
    font-weight: 600;
    color:       #fff;
    line-height: 1.2;
}

.mobile-user-handle {
    font-size:   12px;
    color:       #4e4a62;
    margin-top:  2px;
    font-family: 'DM Mono', monospace;
}

/* ── Portfolio balance card ── */
.mobile-balance {
    margin:        16px;
    padding:       16px 18px;
    border-radius: 12px;
    background:    rgba(121,23,231,0.12);
    border:        1px solid rgba(121,23,231,0.25);
    flex-shrink:   0;
}

.mobile-balance-label {
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          #4e4a62;
    margin-bottom:  6px;
    font-family:    'DM Mono', monospace;
}

.mobile-balance-amount {
    font-size:   26px;
    font-weight: 700;
    color:       #fff;
    font-family: var(--heading-font, 'Chakra Petch', sans-serif);
    line-height: 1.1;
}

.mobile-balance-change {
    font-size:  12px;
    color:      #3ecf8e;
    margin-top: 5px;
    font-weight: 500;
}

/* ── Navigation links ── */
.mobile-nav {
    flex:           1;
    display:        flex;        /* stack children vertically */
    flex-direction: column;
    padding:        8px 12px 24px;
    overflow-y:     auto;
}

/* Labels and links must be full-width block-level inside the column */
.mobile-nav-label,
.mobile-nav-link {
    width: 100%;
}

.mobile-nav-label {
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          #4e4a62;
    padding:        16px 8px 6px;
    font-family:    'DM Mono', monospace;
}

.mobile-nav-link {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         11px 12px;
    border-radius:   9px;
    color:           #9490a8;
    font-size:       14px;
    font-weight:     500;
    text-decoration: none;
    transition:      background 0.18s, color 0.18s;
    margin-bottom:   2px;
}
.mobile-nav-link i {
    width:      18px;
    text-align: center;
    font-size:  14px;
    flex-shrink: 0;
    color:      #4e4a62;
    transition: color 0.18s;
}
.mobile-nav-link:hover {
    background: rgba(121,23,231,0.12);
    color:      #fff;
}
.mobile-nav-link:hover i { color: var(--brand-light, #9f44d3); }

/* Active link (current page) */
.mobile-nav-link.active {
    background: rgba(121,23,231,0.18);
    color:      #fff;
}
.mobile-nav-link.active i { color: var(--brand-light, #9f44d3); }

/* Danger variant (Sign Out) */
.mobile-nav-link.danger { color: rgba(224,85,85,0.7); }
.mobile-nav-link.danger i { color: rgba(224,85,85,0.5); }
.mobile-nav-link.danger:hover {
    background: rgba(224,85,85,0.1);
    color:      #e05555;
}
.mobile-nav-link.danger:hover i { color: #e05555; }

/* ═══════════════════════════════════════════════════════════════════════════
   16. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .insight-grid         { grid-template-columns:1fr 1fr; }
    .analytics-chart-grid { grid-template-columns:1fr; }
    .projection-row       { grid-template-columns:1fr 1fr; }
    /* Sidebar hidden on mobile — main content takes full width */
    .main-wrapper         { margin-left: 0 !important; }
}
@media (max-width: 768px) {
    .insight-grid   { grid-template-columns:1fr 1fr; gap:10px; }
    .projection-row { grid-template-columns:1fr; gap:10px; }

    .running-mandates-table thead, .active-nodes-table thead,
    .transaction-history-table thead, .deposit-table thead { display:none; }

    .running-mandates-table,    .running-mandates-table tbody,
    .running-mandates-table tr, .running-mandates-table td,
    .active-nodes-table,        .active-nodes-table tbody,
    .active-nodes-table tr,     .active-nodes-table td,
    .transaction-history-table, .transaction-history-table tbody,
    .transaction-history-table tr, .transaction-history-table td,
    .deposit-table,             .deposit-table tbody,
    .deposit-table tr,          .deposit-table td { display:block; width:100%; }

    .running-mandates-table tr, .active-nodes-table tr,
    .transaction-history-table tr, .deposit-table tr {
        background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
        border-radius:13px; padding:12px 14px; margin-bottom:12px;
    }
    .running-mandates-table td, .active-nodes-table td,
    .transaction-history-table td, .deposit-table td {
        display:flex; justify-content:space-between; align-items:flex-start;
        gap:12px; padding:8px 0; border:none; text-align:right; white-space:normal;
    }
    .running-mandates-table td:not(:last-child), .active-nodes-table td:not(:last-child),
    .transaction-history-table td:not(:last-child), .deposit-table td:not(:last-child) {
        border-bottom:1px solid rgba(255,255,255,0.05);
    }
    .running-mandates-table td::before, .active-nodes-table td::before,
    .transaction-history-table td::before, .deposit-table td::before {
        content:attr(data-label); min-width:110px; flex:0 0 110px;
        text-align:left; font-weight:600; color:rgba(255,255,255,0.7); line-height:1.35;
    }
    .mandate-toggle { flex-wrap:nowrap !important; gap:6px !important; }
    .mandate-toggle .btn { flex:1 1 0 !important; min-width:0 !important; font-size:12px !important; }
    .table-search .input-group { max-width:100%; }
}
@media (max-width: 576px) {
    .glass-card   { padding:13px !important; }
    .insight-grid { gap:8px; }
    .insight-card { padding:11px 9px; }
    .insight-card .ic-value { font-size:14px; }
}