/* static/css/player-dashboard.css */
/* Scope all styles under #player-dashboard to avoid collisions */
#player-dashboard {
  --pb-bg:#0b1220;
  --pb-card:#0f1a2b;
  --pb-border:#1f2b3f;
  --pb-text:#e7f1ff;
  --pb-muted:#93a3b9;
  --pb-accent:#2de0ba;
  --pb-accent-2:#20c9a6;
  --pb-red:#ff6577;
  --pb-yellow:#ffd36a;
  --pb-chip:#102235;
  --pb-shadow:0 10px 30px rgba(0,0,0,.45);

  color:var(--pb-text);
  background:
    radial-gradient(1200px 800px at -20% -10%, #14375a 0%, transparent 60%),
    radial-gradient(600px 400px at 120% -10%, #0b2b3a 0%, transparent 50%),
    transparent;
  padding-bottom: 84px; /* breathing room if a sticky footer is present elsewhere */
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
}

#player-dashboard .pbpd-root{max-width:1200px;margin:18px auto;padding:0 16px}

/* Cards */
#player-dashboard .pbpd-card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--pb-card);
  border:1px solid var(--pb-border);
  border-radius:16px;
  box-shadow:var(--pb-shadow);
  overflow:hidden;
}
#player-dashboard .pbpd-card + .pbpd-card, 
#player-dashboard .pbpd-card + .pbpd-layout,
#player-dashboard .pbpd-layout + .pbpd-card{margin-top:16px}
#player-dashboard .pbpd-card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--pb-border)}
#player-dashboard .pbpd-card-body{padding:14px 16px}

/* Hero */
#player-dashboard .pbpd-hero{display:flex;gap:16px;padding:16px}
#player-dashboard .pbpd-avatar,
#player-dashboard .pbpd-avatar .inner {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-image: linear-gradient(
    135deg,
    var(--badge-from, rgba(0,211,189,.35)),
    var(--badge-to,   rgba(56,189,248,.18))
  );
  display: grid;
  place-items: center;
}

#player-dashboard .pbpd-hero-main{flex:1}
#player-dashboard .pbpd-hero-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#player-dashboard .pbpd-hero-name{font-size:26px;font-weight:900}
#player-dashboard .pbpd-tag{padding:4px 8px;border-radius:999px;border:1px solid var(--pb-border);background:#0d2133;font-weight:800;color:#99e6d6}
#player-dashboard .pbpd-hero-sub{color:var(--pb-muted);margin-top:2px}
#player-dashboard .pbpd-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
#player-dashboard .pbpd-line-editor{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}

#player-dashboard .pbpd-pill{
  display:inline-flex;align-items:center;gap:.5rem;padding:8px 12px;border-radius:999px;background:var(--pb-chip);
  border:1px solid var(--pb-border);font-weight:800;color:#dbeafe
}
#player-dashboard .pbpd-kpi{background:#0e2236;border-color:#19314b}

#player-dashboard .pbpd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:10px 14px;border-radius:12px;border:1px solid var(--pb-border);
  background:linear-gradient(180deg,rgba(45,224,186,.15),rgba(45,224,186,.06));color:var(--pb-text);cursor:pointer;font-weight:800;letter-spacing:.2px
}
#player-dashboard .pbpd-btn.primary{background:linear-gradient(180deg,var(--pb-accent) 0%, var(--pb-accent-2) 100%);color:#002019;border:none}
#player-dashboard .pbpd-btn.ghost{background:transparent}
#player-dashboard .pbpd-btn.icon{width:36px;height:36px;padding:0;border-radius:999px;background:#0f2234}
#player-dashboard .pbpd-btn.tiny{width:30px;height:30px}

/* KPI grid */
#player-dashboard .pbpd-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:8px 0}
#player-dashboard .pbpd-kpi{padding:12px;border:1px solid var(--pb-border);border-radius:12px;background:linear-gradient(180deg,#0c1a2a,#0b1826)}
#player-dashboard .pbpd-kpi .label{color:#9fb1c9;font-weight:700}
#player-dashboard .pbpd-kpi .big{font-size:20px;font-weight:900;margin-top:4px}
#player-dashboard .pbpd-kpi .mini{color:#9fb1c9;font-weight:700;margin-top:2px}

/* Filters */
#player-dashboard .pbpd-filters{display:flex;gap:10px;flex-wrap:wrap}
#player-dashboard .pbpd-flex-spacer{flex:1}
#player-dashboard .pbpd-dropdown{position:relative}
#player-dashboard .pbpd-dropdown .pbpd-menu{
  position:absolute;top:44px;left:0;min-width:180px;background:var(--pb-card);border:1px solid var(--pb-border);border-radius:12px;padding:6px;
  display:none;z-index:10;box-shadow:var(--pb-shadow)
}
#player-dashboard .pbpd-dropdown.open .pbpd-menu{display:block}
#player-dashboard .pbpd-dropdown .pbpd-menu button{
  display:block;width:100%;text-align:left;padding:10px;border-radius:10px;background:transparent;color:var(--pb-text);border:0;cursor:pointer
}
#player-dashboard .pbpd-dropdown .pbpd-menu button:hover{background:#0f2438}

/* Layout */
#player-dashboard .pbpd-layout{display:grid;gap:16px;grid-template-columns:2fr 1fr}

/* Chart */
#player-dashboard .pbpd-chart-wrap{padding:8px 12px 12px}
#player-dashboard .pbpd-chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#player-dashboard .pbpd-chart-title{font-weight:900}
#player-dashboard .pbpd-legend{display:flex;gap:8px;flex-wrap:wrap}
#player-dashboard .pbpd-legend .stat{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;background:#0f2234;border:1px solid var(--pb-border);border-radius:10px;font-weight:700}
#player-dashboard .pbpd-canvas-wrap{width:100%;height:320px}
#player-dashboard .pbpd-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
#player-dashboard .pbpd-chips .chip{padding:8px 12px;border-radius:999px;border:1px solid var(--pb-border);background:var(--pb-chip);font-weight:800;color:#dbeafe;cursor:pointer}
#player-dashboard .pbpd-chips .chip.active{background:linear-gradient(180deg,rgba(45,224,186,.25), rgba(45,224,186,.08));box-shadow:inset 0 0 0 1px rgba(45,224,186,.3)}
/* Line stepper next to stat chips */
#player-dashboard .pbpd-line-editor{
  display: flex;
  flex-direction: row;   /* force left–center–right layout */
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;     /* don't allow the 3 items to stack */
  margin-left: auto;     /* push stepper to the right of the chip row */
  flex: 0 0 auto;        /* keep its intrinsic width */
}

#player-dashboard .pbpd-line-editor .pbpd-pill{
  white-space: nowrap;   /* keep "Line: 234.5" on one line */
}

#player-dashboard .pbpd-line-editor .step{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: 999px;  /* round pill buttons */
}

/* Compact CTA for list rows */
#player-dashboard .pbpd-list .pbpd-btn.add-to-parlay{
  padding: 8px 12px;
  font-weight: 800;
  border-radius: 10px;
}




/* Sidebar list */
#player-dashboard .pbpd-list{display:flex;flex-direction:column;gap:8px}
#player-dashboard .pbpd-list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--pb-border);border-radius:12px;background:#0e2134}
#player-dashboard .pbpd-list-item .left{display:flex;gap:8px;align-items:center}
#player-dashboard .badge{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%, #2a3c5a, #0e1a2b)}
#player-dashboard .ttl{font-weight:900}
#player-dashboard .muted{color:var(--pb-muted)}
#player-dashboard .add-btn{width:34px;height:34px;border-radius:999px;border:1px solid var(--pb-border);background:#0c2133;color:#d9f7ef;font-weight:900}

/* Divider */
#player-dashboard .pbpd-divider{height:1px;background:var(--pb-border);margin:12px 0}

/* Table */
#player-dashboard .pbpd-log-controls{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
#player-dashboard .pbpd-tabs{display:flex;gap:6px}
#player-dashboard .pbpd-tabs .tab{padding:7px 10px;border-radius:999px;border:1px solid var(--pb-border);background:#0e2134;font-weight:800;cursor:pointer}
#player-dashboard .pbpd-tabs .tab.active{background:linear-gradient(180deg,rgba(45,224,186,.25), rgba(45,224,186,.06));box-shadow:inset 0 0 0 1px rgba(45,224,186,.35)}
#player-dashboard .pbpd-table-wrap{overflow:auto;border:1px solid var(--pb-border);border-radius:12px}
#player-dashboard table{width:100%;border-collapse:separate;border-spacing:0}
#player-dashboard thead th{position:sticky;top:0;background:#0d1f33;border-bottom:1px solid var(--pb-border);text-align:left;padding:10px;font-weight:900;font-size:13px}
#player-dashboard tbody td{padding:10px;border-bottom:1px solid #14263b;font-weight:700}
#player-dashboard tbody tr:nth-child(even){background:#0c1e31}
#player-dashboard tbody tr:hover{background:#0f253b}
#player-dashboard .cell{display:inline-block;padding:6px 10px;border-radius:8px;font-weight:800;letter-spacing:.2px}
#player-dashboard .cell.green{background:rgba(45,224,186,.16);color:#bff7ec;box-shadow:inset 0 0 0 1px rgba(45,224,186,.4)}
#player-dashboard .cell.red{background:rgba(255,101,119,.13);color:#ffc6cf;box-shadow:inset 0 0 0 1px rgba(255,101,119,.35)}
#player-dashboard .cell.yellow{background:rgba(255,211,106,.12);color:#ffeec0;box-shadow:inset 0 0 0 1px rgba(255,211,106,.35)}
#player-dashboard .cell.neutral{background:#0f2234;color:#d2e6f4;border:1px solid var(--pb-border)}

/* Drawer (desktop) / Bottom sheet (mobile) */
#player-dashboard .pbpd-drawer{
  position:fixed;right:0;bottom:0;top:0;width:min(520px,100%);background:var(--pb-card);border-left:1px solid var(--pb-border);
  transform:translateX(100%);transition:.25s transform ease;z-index:200;display:flex;flex-direction:column
}
#player-dashboard .pbpd-drawer.open{transform:translateX(0)}
#player-dashboard .pbpd-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--pb-border)}
#player-dashboard .close-x{width:34px;height:34px;border-radius:10px;background:#0f2235;border:1px solid var(--pb-border);color:#d2f5ef;font-weight:900}
#player-dashboard .pbpd-drawer-body{padding:14px 16px;overflow:auto}


/* Mobile tweaks */
@media (max-width:1000px){
  #player-dashboard {
    max-width: 950px;
  }
  #player-dashboard .pbpd-layout{grid-template-columns:1fr}
  #player-dashboard .pbpd-hero{gap:12px}
  #player-dashboard .pbpd-kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  #player-dashboard .pbpd-canvas-wrap{height:240px}
  #player-dashboard .pbpd-drawer{
    left:0; right:0; width:100%; border-left:none; border-top:1px solid var(--pb-border);
    transform:translateY(100%)
  }
  #player-dashboard .pbpd-drawer.open{transform:translateY(0)}

  #player-dashboard .pbpd-avatar{width:64px;height:64px}
  #player-dashboard .pbpd-avatar .inner{width:64px;height:64px;font-size:26px; font-weight: 700;}

  #player-dashboard .pbpd-hero-name{font-size:32px}
  #player-dashboard .pbpd-tag{padding:6px 10px; font-size: 22px;}
  #player-dashboard .pbpd-hero-sub{font-size: 24px;}
  #player-dashboard .pbpd-quick{font-size: 20px}
  #player-dashboard .pbpd-btn{
    font-size: 20px;
    font-weight: 700;
  }

  #player-dashboard .pbpd-kpi .label{font-size:18px}
  #player-dashboard .pbpd-kpi .big{font-size:32px}
  #player-dashboard .pbpd-kpi .mini{font-size:18px}

  #player-dashboard .pbpd-card-body{padding:18px 16px}
  #player-dashboard .pbpd-filters{font-size: 24px; gap: 14px;}
  #player-dashboard .pbpd-pill #pd-window-lbl,
  #player-dashboard .pbpd-pill #pd-split-lbl,
  #player-dashboard .pbpd-pill #pd-stat-lbl{
    padding:2px 18px;
  }
  #player-dashboard .pbpd-dropdown .pbpd-menu{
    top:60px;
    left:0;
    min-width:240px;
    padding:6px;
  }
  .pbpd-dropdown[data-type="window"] .pbpd-menu button,
  .pbpd-dropdown[data-type="split"]  .pbpd-menu button,
  .pbpd-dropdown[data-type="stat"]   .pbpd-menu button {
    font-size: 24px;      
    line-height: 1.75;
    padding: 10px 14px;      
  }
 
  #player-dashboard .pbpd-chart-head{margin-bottom: 12px;}
  #player-dashboard .pbpd-chart-title{font-size: 26px;}
  #player-dashboard .pbpd-legend{
    font-size: 24px;
    padding: 12spx 18px;
  }
  #player-dashboard #pd-stat-chips .chip,
  #player-dashboard .pbpd-line-editor .pbpd-pill,
  #player-dashboard .pbpd-line-editor .step {
    font-size: 24px;  
    line-height: 1.3;
    padding: 10px 14px; 
    margin-top: 12px;
    font-weight: 600;
  }

  #player-dashboard .pbpd-line-editor .step{
    min-width: 64px;
    height: 48px;
  }

  #player-dashboard .pbpd-card-header {
    font-size: 24px; padding:12px 16px; font-weight: 700;

  }
  #player-dashboard .pbpd-list{font-size: 24px;}
  #player-dashboard #pd-trends-title {
    font-size: 23px;
    margin-top: 16px;
    margin-bottom: 10px;
    font-weight: 700;
  }
  #player-dashboard .badge{width:64px;height:64px; font-size: 22px;}
  #player-dashboard .pbpd-list-item .left{gap:16px;}


  #player-dashboard .pbpd-log-controls{margin-bottom: 18px;}
  .ttl{
    font-size: 24px;
  }
  #player-dashboard .pbpd-log-controls .pbpd-tabs .tab {
    font-size: 24px;
    padding: 10px 24px 10px 24px;
  }

  
  #player-dashboard thead th{font-size:18px; padding: 18px 12px 18px 12px;}


}