/* PPG-AFF02: affiliate portal. No framework -- small enough to read in one sitting. */
:root{
  --navy:#1e3a8a; --navy-d:#16307a; --green:#7ab648; --ink:#1f2430; --mute:#6b7280;
  --line:#e4e7ec; --bg:#f4f6fa; --card:#fff; --err:#b42318; --errbg:#fef3f2;
  --okbg:#ecfdf3; --ok:#027a48; --warnbg:#fffaeb; --warn:#b54708;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
a{color:var(--navy)}

.topbar{background:var(--navy);color:#fff;padding:14px 0;margin-bottom:28px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:18px}
.brand span{font-weight:400;opacity:.8}
.topbar nav{display:flex;gap:18px;flex-wrap:wrap}
.topbar nav a{color:#fff;text-decoration:none;opacity:.9;font-size:14px}
.topbar nav a:hover{opacity:1;text-decoration:underline}

h1{font-size:26px;margin:0 0 20px}
h2{font-size:17px;margin:0 0 14px}
.lede{color:var(--mute);margin-top:-6px}
.muted{color:var(--mute);font-size:13px;margin-left:6px}
.empty{color:var(--mute);padding:14px 0}

.card{background:var(--card);border:1px solid var(--line);border-radius:8px;
      padding:22px;margin-bottom:22px}
.card.narrow{max-width:480px;margin:40px auto}
.cardhead{display:flex;align-items:center;justify-content:space-between;
          gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cardhead h2{margin:0}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
       gap:14px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px}
.stat .k{display:block;color:var(--mute);font-size:12px;text-transform:uppercase;
         letter-spacing:.04em}
.stat .v{display:block;font-size:22px;font-weight:700;margin-top:4px}
.stat .v.big{font-size:28px;color:var(--navy)}
.stat .sub{display:block;color:var(--mute);font-size:12px;margin-top:2px}

.chart{display:flex;align-items:flex-end;gap:3px;height:150px;
       padding:10px;background:#fafbfd;border:1px solid var(--line);border-radius:6px}
.bar{flex:1;background:var(--navy);border-radius:2px 2px 0 0;min-height:1px;opacity:.85}
.bar.has-conv{background:var(--green);opacity:1}
.axis{display:flex;justify-content:space-between;color:var(--mute);
      font-size:12px;margin-top:6px}
.legend{color:var(--mute);font-size:12px;margin-top:10px}
.swatch{display:inline-block;width:10px;height:10px;background:var(--navy);
        border-radius:2px;vertical-align:middle}
.swatch.conv{background:var(--green)}
.chiprow{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#eef2ff;color:var(--navy);border-radius:999px;
      padding:4px 12px;font-size:13px;font-weight:600}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--mute);font-size:12px;text-transform:uppercase;
   letter-spacing:.04em;padding:8px 10px;border-bottom:2px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line)}
th.num,td.num{text-align:right}
code{background:#f1f3f7;padding:2px 6px;border-radius:3px;font-size:13px}
.tag{background:#f1f3f7;color:var(--mute);border-radius:3px;
     padding:1px 7px;font-size:11px;margin-left:6px}

.linkrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
         padding:14px 0;border-bottom:1px solid var(--line)}
.linkrow.off{opacity:.55}
.linkmeta{min-width:170px}
.linkurl{flex:1;min-width:250px}
.linkurl input{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.linkstats{display:flex;gap:14px;align-items:center;color:var(--mute);font-size:13px}
.tinyform{display:inline}
.linkbtn{background:none;border:1px solid var(--line);color:var(--mute);
         padding:5px 12px;border-radius:4px;cursor:pointer;font-size:13px;width:auto}
.linkbtn:hover{border-color:var(--navy);color:var(--navy)}

label{display:block;margin-bottom:14px;font-size:14px;font-weight:600}
label small{font-weight:400;color:var(--mute)}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;padding:10px 12px;border:1px solid #cbd2dd;border-radius:5px;
  font-size:15px;font-family:inherit;margin-top:5px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);
  outline-offset:-1px;border-color:var(--navy)}
button{background:var(--navy);color:#fff;border:0;padding:11px 22px;
       border-radius:5px;font-size:15px;font-weight:600;cursor:pointer}
button:hover{background:var(--navy-d)}
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;
     padding:9px 16px;border-radius:5px;font-size:14px;font-weight:600}
.btn.small{padding:6px 13px;font-size:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
form.inline{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
form.inline label{flex:1;min-width:190px;margin-bottom:0}
.alt{color:var(--mute);font-size:14px;margin-top:18px}

.flash{padding:11px 15px;border-radius:6px;margin-bottom:16px;font-size:14px}
.flash-err{background:var(--errbg);color:var(--err);border:1px solid #fecdca}
.flash-ok{background:var(--okbg);color:var(--ok);border:1px solid #a6f4c5}
.flash-info{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff}

.notice{background:#f8fafc;border:1px solid var(--line);border-left:3px solid var(--navy);
        border-radius:0 6px 6px 0;padding:13px 16px;margin-top:18px;
        font-size:13px;color:#374151}
.notice.warn{background:var(--warnbg);border-color:#fedf89;border-left-color:var(--warn);color:var(--warn)}
.notice p{margin:0 0 8px}
.notice p:last-child{margin:0}

.foot{color:var(--mute);font-size:13px;padding:26px 20px 40px;text-align:center}
.foot p{margin:4px 0}

@media (max-width:640px){
  .row2,.row3{grid-template-columns:1fr}
  .chart{height:110px}
  h1{font-size:22px}
}

/* ===========================================================================
   PPG-AFF04 -- conversions breakdown
   Append to assets/portal.css. Uses the existing custom properties from :root.
   =========================================================================== */

.filterrow { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.filterrow .btn.on { background:var(--green); border-color:var(--green); color:#fff; }

.chiprow { display:flex; flex-wrap:wrap; gap:8px; }

/* The breakdown table is the point of the page: the arithmetic has to read
   left to right as subtraction, then a rule, then the result. */
table.breakdown { width:100%; border-collapse:collapse; font-size:14px; }
table.breakdown th,
table.breakdown td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.breakdown th { text-align:left; font-weight:600; color:var(--mute);
                     font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
table.breakdown th.num,
table.breakdown td.num { text-align:right; white-space:nowrap; }
table.breakdown tbody tr:hover { background:#fafbfc; }

/* Subtracted amounts read as subtractions, not as values. */
.sub-amt { color:var(--err); }
.zero    { color:var(--line); }

/* The left border on Commissionable is the "draw a line and add it up" rule. */
td.rule { border-left:2px solid var(--line); font-weight:600; }

.tag { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:3px;
       background:var(--bg); color:var(--mute); font-size:11px; vertical-align:middle; }

.status { display:inline-block; padding:2px 8px; border-radius:11px; font-size:12px; }
.status-pending  { background:var(--warnbg); color:var(--warn); }
.status-approved { background:var(--okbg);   color:var(--ok); }
.status-payable  { background:var(--okbg);   color:var(--ok); }
.status-paid     { background:var(--bg);     color:var(--mute); }
.status-reversed { background:var(--errbg);  color:var(--err); }

/* A row whose arithmetic does not hold is shown, not hidden. An affiliate
   spotting it and emailing is a far better outcome than them finding it
   months later during a reconciliation. */
tr.flagged td { background:var(--errbg); }
tr.flagged-note td { background:var(--errbg); color:var(--err); font-size:13px;
                     border-bottom:1px solid var(--line); }

.pager { display:flex; align-items:center; gap:12px; margin-top:16px; }

.notice { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--navy);
          border-radius:0 8px 8px 0; padding:16px 20px; margin-bottom:22px; }
.notice p { margin:0 0 10px; font-size:14px; color:var(--mute); }
.notice p:last-child { margin-bottom:0; }
.notice.warn { border-left-color:var(--warn); }

@media (max-width: 860px) {
  .tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.breakdown { min-width:820px; }
}

/* ===========================================================================
   PPG-AFF05 -- corrections from first render
   =========================================================================== */

/* .filterrow .btn.on lost to .btn on specificity, so every filter button
   rendered as selected. */
.filterrow a.btn.small.on { background:var(--green); border-color:var(--green); color:#fff; }

/* Order number and date were wrapping mid-date ("SQ143181 Aug" / "21, 2026").
   Also tidies the coupon code and the hold-until line. */
table.breakdown td .muted { display:block; margin-top:2px; }

/* ===========================================================================
   PPG-AFF17 -- CPC test periods
   =========================================================================== */

.status-open     { background:var(--okbg);   color:var(--ok); }
.status-settling { background:var(--warnbg); color:var(--warn); }
.status-review   { background:var(--warnbg); color:var(--warn); }
.status-paid     { background:var(--bg);     color:var(--mute); }

/* The pending figure is deliberately styled DIFFERENTLY from the approved one.
   A publisher glancing at this should not mistake "might earn" for "earned" --
   that is the whole reason the number is shown at all. */
.payline { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
           padding:14px 0 4px; border-top:1px solid var(--line); margin-top:8px; }
.payline .k { font-size:13px; color:var(--mute); text-transform:uppercase;
              letter-spacing:.03em; }
.payline .v.big { font-size:24px; font-weight:600; }
.payline.pending .v.big { color:var(--mute); }

.hint { font-size:13px; color:var(--mute); margin:4px 0 0; }
td.hint { padding:8px 10px; }
.stamp { font-size:12px; color:var(--mute); margin:12px 0 0; }

.cardhead .status { margin-left:auto; }