.pphmon-root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0f16;color:#e7eefc;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;max-width:1100px;margin:0 auto}
.pphmon-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap}
.pphmon-hey{font-size:22px;font-weight:700;letter-spacing:.2px}
.pphmon-hey.pphmon-live{color:#3aa0ff}
.pphmon-brand{color:#5ad1ff}
.pphmon-sync{font-size:12px;opacity:.8;margin-top:4px}
.pphmon-controls{display:flex;gap:10px;align-items:center}
.pphmon-controls select,.pphmon-controls input{background:#0f1622;color:#e7eefc;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 10px}
.pphmon-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.pphmon-stat{background:#0f1622;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px}
.pphmon-stat .k{font-size:12px;opacity:.85}
.pphmon-stat .v{font-size:18px;font-weight:700;margin-top:4px}
.pphmon-calendar{margin-top:14px}
.pphmon-cal-head{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;font-size:12px;opacity:.85;margin-bottom:8px}
.pphmon-cal-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.pphmon-day{min-height:86px;background:#0f1622;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;position:relative}
.pphmon-day.off{opacity:.35}
.pphmon-day .d{position:absolute;top:8px;right:10px;font-size:12px;opacity:.85}
.pphmon-day .p{font-size:16px;font-weight:800;margin-top:18px}
.pphmon-day .pct{font-size:12px;opacity:.85;margin-top:2px}
.pphmon-day .dd{font-size:12px;margin-top:4px;color:#ff6b6b}
.pphmon-footer{display:flex;justify-content:space-between;gap:10px;margin-top:10px;opacity:.7;font-size:12px}
@media(max-width:840px){.pphmon-stats{grid-template-columns:repeat(2,1fr)}}

.pphmon-day.week-total{background:#0b111b;border:1px solid rgba(0,255,180,.25);box-shadow:0 0 0 2px rgba(0,255,180,.08) inset}
.pphmon-day.week-total .d{display:none}
.pphmon-day.week-total .p{margin-top:8px}
.pphmon-day.week-total .pct{opacity:.9}

/* Calendar icon visibility fix */
.pphmon-month-picker input[type="month"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: 1;
}
.pphmon-month-picker input[type="month"]{
  color: #ffffff;
}

/* Custom white SVG calendar icon */
.pphmon-month-picker input[type="month"]::-webkit-calendar-picker-indicator {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+CjxyZWN0IHg9JzMnIHk9JzQnIHdpZHRoPScxOCcgaGVpZ2h0PScxOCcgcng9JzInIHJ5PScyJyBmaWxsPSdub25lJyBzdHJva2U9J3doaXRlJyBzdHJva2Utd2lkdGg9JzInLz4KPGxpbmUgeDE9JzMnIHkxPScxMCcgeDI9JzIxJyB5Mj0nMTAnIHN0cm9rZT0nd2hpdGUnIHN0cm9rZS13aWR0aD0nMicvPgo8bGluZSB4MT0nOCcgeTE9JzInIHgyPSc4JyB5Mj0nNicgc3Ryb2tlPSd3aGl0ZScgc3Ryb2tlLXdpZHRoPScyJy8+CjxsaW5lIHgxPScxNicgeTE9JzInIHgyPScxNicgeTI9JzYnIHN0cm9rZT0nd2hpdGUnIHN0cm9rZS13aWR0aD0nMicvPgo8L3N2Zz4=') center/18px 18px no-repeat;
  filter: none;
  opacity: 1;
}
.pphmon-month-picker input[type="month"] {
  color: #ffffff;
}

/* PPH month icon (forced) - always visible */
.pphmon-month {
  color:#fff;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+CjxyZWN0IHg9JzMnIHk9JzQnIHdpZHRoPScxOCcgaGVpZ2h0PScxOCcgcng9JzInIHJ5PScyJyBmaWxsPSdub25lJyBzdHJva2U9J3doaXRlJyBzdHJva2Utd2lkdGg9JzInLz4KPGxpbmUgeDE9JzMnIHkxPScxMCcgeDI9JzIxJyB5Mj0nMTAnIHN0cm9rZT0nd2hpdGUnIHN0cm9rZS13aWR0aD0nMicvPgo8bGluZSB4MT0nOCcgeTE9JzInIHgyPSc4JyB5Mj0nNicgc3Ryb2tlPSd3aGl0ZScgc3Ryb2tlLXdpZHRoPScyJy8+CjxsaW5lIHgxPScxNicgeTE9JzInIHgyPScxNicgeTI9JzYnIHN0cm9rZT0nd2hpdGUnIHN0cm9rZS13aWR0aD0nMicvPgo8L3N2Zz4=');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px 18px;
  padding-right: 38px;
}
/* keep native picker clickable but hide its icon */
.pphmon-month::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: block;
  width: 38px;
  height: 100%;
  cursor: pointer;
}

/* === PPH Styling Update: Profit colors, blanks, DD grey, Total bold blue === */
.pphmon-day .p{
  font-weight: 400;
}
.pphmon-day .p.profit-pos{ color: #3aa0ff; }   /* blue */
.pphmon-day .p.profit-neg{ color: #ff4b4b; }   /* red */
.pphmon-day .p.profit-zero{ color: rgba(255,255,255,0.55); }
.pphmon-day .dd{
  color: rgba(200,210,225,0.65); /* grey */
}
/* hide empty placeholders cleanly */
.pphmon-day.empty .p,
.pphmon-day.empty .pct,
.pphmon-day.empty .dd{
  display:none;
}
/* Total column emphasis */
.pphmon-day.week-total .p{
  font-weight: 700;
  color: #3aa0ff;
}

/* === KPI Profit/Percent color rules (top cards) === */
.pphmon-stat .v.profit-pos{ color:#3aa0ff; }
.pphmon-stat .v.profit-neg{ color:#ff4b4b; }
.pphmon-stat .v.profit-zero{ color:rgba(255,255,255,0.85); }
.pphmon-stat .v.pct-pos{ color:#3aa0ff; }
.pphmon-stat .v.pct-neg{ color:#ff4b4b; }
.pphmon-stat .v.pct-zero{ color:rgba(255,255,255,0.85); }

/* === PPH Responsive (mobile/tablet) === */
.pphmon-root{ max-width: 100%; }
.pphmon-controls{ display:flex; gap:10px; }

/* Tablet */
@media (max-width: 1024px){
  .pphmon-header{ flex-wrap: wrap; gap: 10px; }
  .pphmon-controls{ width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .pphmon-stats{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Mobile */
@media (max-width: 640px){
  .pphmon-header{ gap: 10px; }
  .pphmon-controls{ width: 100%; }
  .pphmon-controls select,
  .pphmon-controls input{ width: 100%; min-width: 0; }
  .pphmon-stats{ grid-template-columns: 1fr; }
  .pphmon-stat .v{ font-size: 20px; }

  /* Calendar scroll on small screens (8 columns incl Total) */
  .pphmon-calendar{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .pphmon-cal-head,
  .pphmon-cal-grid{
    min-width: 760px;
  }
}

/* === TOTAL NEGATIVE FIX === */
.pphmon-day.week-total .p.profit-neg{
  color:#ff4b4b !important;
  font-weight:700;
}
.pphmon-day.week-total .p.profit-pos{
  color:#3aa0ff !important;
  font-weight:700;
}


/* === Month picker icon white (strong override) === */
.pphmon-controls input[type="month"],
.pphmon-controls input[type="date"],
.pphmon-month {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+CjxyZWN0IHg9JzMnIHk9JzQnIHdpZHRoPScxOCcgaGVpZ2h0PScxOCcgcng9JzInIHJ5PScyJyBmaWxsPSdub25lJyBzdHJva2U9J3doaXRlJyBzdHJva2Utd2lkdGg9JzInLz4KPGxpbmUgeDE9JzMnIHkxPScxMCcgeDI9JzIxJyB5Mj0nMTAnIHN0cm9rZT0nd2hpdGUnIHN0cm9rZS13aWR0aD0nMicvPgo8bGluZSB4MT0nOCcgeTE9JzInIHgyPSc4JyB5Mj0nNicgc3Ryb2tlPSd3aGl0ZScgc3Ryb2tlLXdpZHRoPScyJy8+CjxsaW5lIHgxPScxNicgeTE9JzInIHgyPScxNicgeTI9JzYnIHN0cm9rZT0nd2hpdGUnIHN0cm9rZS13aWR0aD0nMicvPgo8L3N2Zz4=') !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 18px 18px !important;
  padding-right: 38px !important;
  color: #ffffff !important;
  color-scheme: dark;
}

.pphmon-controls input[type="month"]::-webkit-calendar-picker-indicator,
.pphmon-controls input[type="date"]::-webkit-calendar-picker-indicator,
.pphmon-month::-webkit-calendar-picker-indicator {
  opacity: 1 !important;
  display: block !important;
  width: 38px !important;
  height: 100% !important;
  cursor: pointer;
  filter: invert(1) brightness(2) !important;
  background: none !important;
}

/* === Month picker clickable icon fix ===
   Ensure the visible icon is the native picker indicator (clickable),
   not a background image (non-clickable). */
.pphmon-controls input[type="month"]{
  padding-right: 38px; /* reserve space for the native icon */
  background-image: none !important;
}
.pphmon-controls input[type="month"]::-webkit-calendar-picker-indicator{
  opacity: 1 !important;
  filter: invert(1) brightness(2) !important;
  cursor: pointer;
  width: 18px;
  height: 18px;
  margin-right: 10px;
}
/* If any wrapper overlays exist, make sure they don't block clicks */
.pphmon-controls, .pphmon-controls *{
  pointer-events: auto;
}

/* === Month picker clickable icon (button overlay) === */
.pphmon-month-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pphmon-month{
  padding-right: 44px; /* space for icon button */
}
.pphmon-month-btn{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff !important;
  cursor: pointer;
  opacity: 0.9;
  pointer-events: auto;
}
.pphmon-month-btn:hover{ opacity: 1; }
.pphmon-month-btn svg{ display:block; }


/* Deposit/Withdrawal dots */
.pphmon-dots{
  position:absolute;
  top:10px;
  left:10px;
  display:flex;
  gap:6px;
  z-index:6;
  pointer-events:auto;
}
.pphmon-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  box-shadow:0 0 0 2px rgba(255,255,255,0.08);
}
.pphmon-dot-dep{ background:#2d7cff; }
.pphmon-dot-wd{ background:#ff4d4d; }

/* Month picker icon must be visible + clickable */
.pphmon-month-wrap{ position:relative; }
.pphmon-month{ position:relative; z-index:1; padding-right:44px; }
.pphmon-month-btn{
  z-index:10;
  pointer-events:auto;
}
.pphmon-month-btn svg{
  display:block !important;
  pointer-events:none;
  color:#fff !important;
  fill:currentColor !important;
}