/* PRODUCTION'S SURFACES INSIDE THE CRM.
 *
 * These carry NO Audit Room identity on purpose — the approved mock says it
 * outright: "a designer must not feel a seam." So everything here is built
 * from the CRM's own tokens (--maroon, --line, --card, --r-sm), not from
 * production's stylesheet. prod.css must NEVER be linked into index.html: its
 * top-level selectors include .bar, .chip, .btn and .toast, and it would
 * repaint the CRM.
 *
 * HOUSE RULE (CLAUDE.md): the dashboard is a guest in this app — prefix every
 * class. There are no bare element selectors in this file, deliberately. The
 * .pp names come from the approved mock, docs/design/production-v1/crm-guest.html.
 */

.ppwrap{margin:14px 0}
.pphead{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted,#6b6266);margin:0 0 7px}

/* ---- the production strip ---- */
.ppstrip{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:var(--card,#fff);border:1px solid var(--line,#ddd);
  border-radius:var(--r-md,10px);padding:11px 13px;font-size:13.5px}
.ppstrip .ppst{font-weight:650}
.ppstrip .ppdim{color:var(--muted,#777)}
.ppstrip .ppgrow{flex:1 1 auto}
.ppbtn{min-height:44px;border:1px solid var(--maroon,#5B2333);
  background:var(--maroon,#5B2333);color:#fff;border-radius:var(--r-sm,8px);
  padding:0 14px;font-size:13px;font-weight:600;cursor:pointer}
.ppbtn.ppghost{background:var(--card,#fff);color:var(--maroon,#5B2333)}
.ppbtn[disabled]{opacity:.55;cursor:default}

/* ---- a raised alert / nudge row ----
   border-inline-start, not border-left: these rows carry Arabic client names
   under dir="rtl", and a physical left border lands on the wrong side. */
.pprow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border-inline-start:4px solid var(--maroon,#5B2333);
  background:var(--card,#fff);border-radius:0 var(--r-md,10px) var(--r-md,10px) 0;
  padding:10px 12px;font-size:13.5px;margin-top:8px}
.pprow.ppwarn{border-inline-start-color:#B82E25}
.pprow .pptext{flex:1 1 260px}
.pprow .pptext b{font-weight:650}

/* ---- the nine named document slots ---- */
.ppslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;margin-top:8px}
.pps{border:1px solid var(--line,#ddd);border-radius:var(--r-sm,8px);
  padding:8px 10px;font-size:12px;min-height:44px;background:var(--card,#fff);
  cursor:pointer;text-align:start}
.pps .ppsn{display:block;font-weight:600}
.pps small{display:block;color:var(--muted,#999);font-size:10.5px;margin-top:2px}
.pps.ppok{border-color:var(--maroon,#5B2333);border-inline-start-width:3px}
.pps.ppmiss{background:repeating-linear-gradient(45deg,#f2eeee,#f2eeee 5px,
  var(--card,#fff) 5px,var(--card,#fff) 10px);color:var(--muted,#777)}

.ppnote{font-size:12px;color:var(--muted,#777);margin-top:6px}

/* Touch: the global floor lives in a media query and carries no specificity,
   so any class-level rule here would silently beat it (index.html:201
   documents that exact bug). Everything above is already >= 44px. */
@media(pointer:coarse){
  .pps{min-height:52px}
  .ppbtn{min-height:44px;font-size:14px}
}

/* ---- the member's collected figures, on the Clients page ----
   They sit inside the CRM's own #ppmoney bar, so they borrow its rhythm
   rather than opening a second money box on the same screen. */
.ppmini{display:inline-block;margin-inline-end:22px}
.ppmini .ppminiv{font-weight:800;font-size:19px;line-height:1.1}
.ppmini .ppminik{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted,#777);margin-top:2px}
.pprow .ppwhy{display:block;margin-top:2px}

/* A month, never a day — `type="month"` is the only native control that asks
   for exactly what a client actually knows. */
.ppmonth{min-height:44px;padding:8px 10px;border:1px solid #D3CDCF;border-radius:8px;
  font:inherit;font-size:16px;color:#2A2326;background:#fff;max-width:170px}