/* ══════════════════════════════════════════════════════════════════
   ACCOUNTS PAGE — Payout Workflow layer (Awaiting Payout / Processing
   widget, cycle strip, timeline, schedule settings, grid badges).
   Scope: #page-accounts + payout confirmation modal. Loaded last.
   ══════════════════════════════════════════════════════════════════ */

/* ── Compact status widget (Overview tab) ───────────────────────────
   Calm, restrained — no banners, no confetti. A small progress ring +
   two lines of copy + action buttons, sized like the other cards. */
.apw-widget{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--glass-1); border:1px solid var(--glass-border); border-radius:var(--r-lg);
  padding:14px 16px; margin-bottom:16px;
}
.apw-widget-reached{ border-color:rgba(59,130,246,0.28); background:linear-gradient(135deg, rgba(59,130,246,0.06), var(--glass-1)); }
.apw-widget-awaiting{ border-color:rgba(251,191,36,0.28); background:linear-gradient(135deg, rgba(251,191,36,0.06), var(--glass-1)); }
.apw-widget-processing{ border-color:rgba(45,212,191,0.28); background:linear-gradient(135deg, rgba(45,212,191,0.06), var(--glass-1)); }

.apw-widget-ring{ position:relative; flex:none; width:54px; height:54px; }
.apw-ring{ display:block; }
.apw-ring-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:16px; height:16px; color:var(--text2);
}
.apw-widget-reached .apw-ring-icon{ color:var(--blue); }
.apw-widget-awaiting .apw-ring-icon{ color:var(--gold); }
.apw-widget-processing .apw-ring-icon{ color:var(--teal); }
.apw-pulse .apw-ring-icon{ animation:apw-pulse 2.2s ease-in-out infinite; }
@keyframes apw-pulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .apw-pulse .apw-ring-icon{ animation:none; }
}

.apw-widget-body{ flex:1; min-width:0; }
.apw-widget-title{ font-family:var(--font-head); font-size:13.5px; font-weight:800; color:var(--text); letter-spacing:-.1px; }
.apw-widget-reached .apw-widget-title{ color:var(--blue); }
.apw-widget-awaiting .apw-widget-title{ color:var(--gold); }
.apw-widget-processing .apw-widget-title{ color:var(--teal); }
.apw-widget-sub{ font-size:11.5px; color:var(--text2); margin-top:3px; line-height:1.4; max-width:56ch; }
.apw-widget-meta{ display:flex; gap:18px; margin-top:9px; flex-wrap:wrap; }
.apw-widget-meta span{ font-size:10.5px; color:var(--text3); font-weight:600; }
.apw-widget-meta strong{ color:var(--text); font-family:var(--font-mono); font-weight:700; margin-left:3px; }

.apw-widget-actions{ display:flex; flex-direction:column; gap:6px; flex:none; }
.apw-widget-actions .acch-act-btn{ white-space:nowrap; }

/* ── Grid card note (compact, one line, sits above the action row) ── */
.apw-card-note{
  display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600;
  padding:6px 10px; border-radius:var(--r-md); margin-top:10px;
}
.apw-card-note .icn{ width:12px; height:12px; flex:none; }
.apw-card-note-reached{ background:var(--blue-dim); color:var(--blue); }
.apw-card-note-awaiting{ background:var(--gold-glow); color:var(--gold); }
.apw-card-note-processing{ background:rgba(45,212,191,0.12); color:var(--teal); }

/* ── Live countdown chip — grid card note + Overview widget ─────────── */
.apw-countdown{
  display:inline-flex; align-items:center; margin-left:6px; padding:2px 8px;
  border-radius:var(--r-full); font-family:var(--font-mono); font-size:10px; font-weight:700;
  background:rgba(59,130,246,0.16); color:var(--blue); letter-spacing:.2px; white-space:nowrap;
}
.apw-countdown-inline{ margin-left:0; }

/* ── Grid status pill — Target Reached / Awaiting Payout / Processing ── */
.acch-status-reached{ background:var(--blue-dim); color:var(--blue); }
.acch-status-awaiting{ background:var(--gold-glow); color:var(--gold); }
.acch-status-processing{ background:rgba(45,212,191,0.14); color:var(--teal); }

/* ── Current payout-cycle strip (Risk & Payout tab) ─────────────────── */
.apw-cycle-strip{ margin:16px 0 4px; }
.apw-cycle-strip-head{ font-size:11px; font-weight:800; color:var(--text3); text-transform:uppercase; letter-spacing:.3px; margin-bottom:8px; }
.apw-cycle-since{ text-transform:none; font-weight:600; color:var(--text3); opacity:.8; margin-left:4px; }

/* ── Payout timeline ─────────────────────────────────────────────────
   Target Reached → Awaiting Payout → Processing → Completed → New Cycle */
.apw-timeline{
  display:flex; align-items:center; margin:18px 0 6px; padding:12px 6px;
  background:var(--glass-1); border:1px solid var(--glass-border); border-radius:var(--r-md);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.apw-tl-step{ display:flex; flex-direction:column; align-items:center; gap:5px; flex:none; padding:0 6px; min-width:64px; }
.apw-tl-dot{ width:9px; height:9px; border-radius:50%; background:var(--glass-2); border:2px solid var(--glass-border-h); }
.apw-tl-step.done .apw-tl-dot{ background:var(--teal); border-color:var(--teal); }
.apw-tl-step.current .apw-tl-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow); }
.apw-tl-label{ font-size:9px; font-weight:700; color:var(--text3); text-align:center; letter-spacing:.1px; white-space:nowrap; }
.apw-tl-step.done .apw-tl-label, .apw-tl-step.current .apw-tl-label{ color:var(--text2); }
.apw-tl-line{ flex:1; height:2px; min-width:14px; background:var(--glass-border); margin-top:-14px; }

/* ── Processing / completion action row (Risk & Payout tab) ─────────── */
.apw-actions-row{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

/* ── Payout schedule preview text ────────────────────────────────────── */
.apw-schedule-preview{
  font-size:11.5px; color:var(--text3); padding:8px 10px; border-radius:var(--r-md);
  background:var(--glass-2); margin:2px 0 4px;
}
.apw-schedule-preview strong{ color:var(--text2); font-family:var(--font-mono); }
.apw-manual-badge{
  display:inline-flex; align-items:center; font-size:10px; font-weight:700; color:var(--blue);
  background:var(--blue-dim); padding:3px 9px; border-radius:var(--r-full);
}

/* ── Complete-payout confirmation modal ──────────────────────────────── */
.apw-confirm-line{ font-size:13px; color:var(--text2); line-height:1.5; }
.apw-confirm-line strong{ color:var(--text); font-family:var(--font-mono); }
.apw-confirm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.apw-confirm-grid > div{ background:var(--glass-1); border:1px solid var(--glass-border); border-radius:var(--r-md); padding:9px 12px; }
.apw-confirm-grid .k{ display:block; font-size:9.5px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:.2px; margin-bottom:3px; }
.apw-confirm-grid .v{ display:block; font-size:13.5px; font-weight:800; font-family:var(--font-mono); color:var(--text); }
.apw-confirm-note{
  display:flex; align-items:flex-start; gap:8px; font-size:11.5px; line-height:1.5; color:var(--text2);
  background:var(--green-dim); border:1px solid rgba(52,211,153,0.25); border-radius:var(--r-md); padding:10px 12px;
}
.apw-confirm-note .icn{ width:14px; height:14px; flex:none; margin-top:2px; color:var(--green); }

/* ══ Mobile ══════════════════════════════════════════════════════ */
@media (max-width:640px){
  .apw-widget{ flex-direction:column; }
  .apw-widget-actions{ flex-direction:row; width:100%; }
  .apw-widget-actions .acch-act-btn{ flex:1; justify-content:center; }
  .apw-confirm-grid{ grid-template-columns:1fr; }
  .apw-timeline{ justify-content:flex-start; }
}