/* File: public_html/assets/home-stats.css */

/* رنگ آیکن‌ها بر اساس تم */
:root{
    /* دارک تم (پیش‌فرض) → آیکن روشن */
    --stat-icon-color:#e5e7eb;
  }
  
  body.light-theme{
    /* لایت تم → آیکن تیره */
    --stat-icon-color:#0f172a;
  }
  
  /* ===== Stats layout ===== */
  .stats-box{
    margin-top:14px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(15,23,42,.04);
    padding:14px 14px 12px;
  }
  
  .stats-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
  }
  
  .stats-title{
    margin:0;
    font-size:14px;
    font-weight:700;
    color:var(--text);
  }
  
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:12px;
  }
  
  .stat-item{
    background:color-mix(in oklab, var(--card) 98%, transparent);
    border:1px solid color-mix(in oklab, var(--border) 55%, transparent);
    border-radius:14px;
    min-height:110px;
    padding:10px 12px 8px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:6px;
    transition:transform .12s ease-out, box-shadow .12s ease-out, border .12s ease-out;
  }
  
  .stat-item:hover{
    transform:translateY(-1px);
    border-color:color-mix(in oklab, var(--accent) 35%, var(--border));
    box-shadow:0 14px 30px rgba(15,23,42,.05);
  }
  
  .stat-item.stat-accent{
    background:color-mix(in oklab, var(--accent) 20%, var(--card));
    border-color:color-mix(in oklab, var(--accent) 28%, var(--border));
  }
  
  .stat-top{
    display:flex;
    align-items:center;
    gap:8px;
  }
  
  /* مربع پشت آیکن */
  .stat-icon{
    position:relative;
    width:32px;
    height:32px;
    border-radius:12px;
    background:color-mix(in oklab, var(--card) 98%, transparent);
    border:1px solid color-mix(in oklab, var(--border) 60%, transparent);
  }
  
  /* خود آیکن به‌صورت ماسک روی مربع */
  .stat-icon::before{
    content:"";
    position:absolute;
    inset:0;
    margin:auto;
    width:18px;
    height:18px;
    background-color:var(--stat-icon-color);
    -webkit-mask: var(--stat-icon-mask) center/contain no-repeat;
    mask: var(--stat-icon-mask) center/contain no-repeat;
  }
  
  /* آیکن دیفالت */
  .stat-item .stat-icon{
    --stat-icon-mask:url('/assets/icons/stat-default.svg');
  }
  
  /* مپ کردن هر stat--X به SVG خودش */
  .stat--customers .stat-icon{ --stat-icon-mask:url('/assets/icons/stat-users.svg'); }
  .stat--clients   .stat-icon{ --stat-icon-mask:url('/assets/icons/stat-clients.svg'); }
  .stat--accounts  .stat-icon{ --stat-icon-mask:url('/assets/icons/stat-accounts.svg'); }
  .stat--traders   .stat-icon{ --stat-icon-mask:url('/assets/icons/stat-traders.svg'); }
  .stat--copied    .stat-icon{ --stat-icon-mask:url('/assets/icons/stat-copied.svg'); }
  .stat--signals   .stat-icon{ --stat-icon-mask:url('/assets/icons/stat-signals.svg'); }
  .stat--aum       .stat-icon{ --stat-icon-mask:url('/assets/icons/stat-aum.svg'); }
  .stat--gross     .stat-icon{ --stat-icon-mask:url('/assets/icons/stat-gross.svg'); }
  .stat--paid      .stat-icon{ --stat-icon-mask:url('/assets/icons/stat-paid.svg'); }
  
  .stat-label{
    margin:0;
    font-size:12px;
    color:var(--muted);
  }
  
  .stat-value{
    margin:0;
    color:var(--text);
  }
  
  .stat-value.stat-small{
    font-size:1.6rem;
    font-weight:700;
  }
  
  .stat-value.stat-money{
    font-size:1.05rem;
    font-weight:600;
    letter-spacing:.02em;
    direction:ltr;
    text-align:right;
    word-break:break-all;
  }
  
  [dir="rtl"] .stat-value.stat-money{
    text-align:left;
  }
  
  /* اگر لیست payout/withdrawals هم کنار این باکس استفاده می‌کنی
     همراش این بخش رو هم تو همین فایل نگه دار */
  .lists-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(330px, 1fr));
    gap:14px;
    margin-top:14px;
  }
  
  .list-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(15,23,42,.04);
    padding:10px 10px 6px;
  }
  
  .list-title{
    margin:0 0 6px;
    font-size:13px;
    font-weight:600;
    color:var(--text);
    border-bottom:1px solid color-mix(in oklab, var(--border) 25%, transparent);
    padding-bottom:5px;
  }
  
  .list-body{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  
  .list-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    padding:3px 2px 2px;
    border-bottom:1px dashed color-mix(in oklab, var(--border) 18%, transparent);
  }
  
  .list-item:last-child{
    border-bottom:none;
  }
  
  .list-main{
    font-weight:600;
  }
  
  .list-amount{
    font-size:12px;
  }
  
  .list-hash{
    font-size:11px;
    color:var(--muted);
  }
  
  @media (max-width:640px){
    .stats-grid{ grid-template-columns:1fr 1fr; }
    .stat-item{ min-height:105px; }
    .lists-row{ grid-template-columns:1fr; }
  }