/* =============================================================================
   Affiliate portal — dark console theme.
   =============================================================================

   Layered ON TOP of admin.css rather than replacing it. That file supplies the
   `p-*` component vocabulary every one of the eleven tabs is already built
   from — tables, drawers, badges, alerts, form controls — and re-authoring all
   of it to restyle the shell would be a rewrite of eleven working screens to
   change their colours.

   So this file does two things and only two:
     1. RETHEMES admin.css by overriding the custom properties it reads. The
        components below inherit the dark palette without a single one of their
        rules being touched.
     2. ADDS the shell (sidebar + topbar) and the dashboard's own components,
        which have no equivalent in admin.css.

   Anything here that is not a token override is a new component. If you find
   yourself restyling a `.p-*` rule, the token is missing — add the token.

   ONE PALETTE, DEFINED ONCE. Every green in the design is a step on the same
   scale. Components reference the scale, never a literal, so the accent can be
   retuned in one place. The near-black ground is what makes a single accent
   read as bright without any of it being a light source.
   ========================================================================== */

:root {
  /* ---- ground ---- */
  --a-bg:         #ffffff;   /* page */
  --a-bg-2:       #f8fafc;   /* sidebar */
  --a-surface:    #ffffff;   /* cards */
  --a-surface-2:  #f1f5f9;   /* raised rows, inputs */
  --a-border:     #e2e8f0;
  --a-border-soft:#eef2f6;

  /* ---- accent scale ---- */
  --a-green-100:  #d1fae5;
  --a-green-300:  #6ee7b7;
  --a-green-400:  #34d399;
  --a-green-500:  #10b981;   /* the accent */
  --a-green-600:  #059669;
  --a-green-700:  #047857;
  --a-glow:       0 0 0 1px rgba(37,99,235,.20), 0 0 24px -6px rgba(37,99,235,.35);

  /* ---- text ---- */
  --a-text:       #0f172a;
  --a-text-dim:   #475569;
  --a-text-faint: #94a3b8;
  /* Placeholders and disabled text. --a-text-faint is a DECORATIVE grey — it
     is correct for axis ticks and timestamps, and far too dark for text a
     person is meant to read and act on. Placeholder copy tells you what a
     field wants, so it needs real contrast against the input's own ground,
     not the lowest step on the scale. */
  --a-placeholder: #64748b;

  /* FORM FIELDS ARE LIGHT, inside a dark portal. The dark fields measured fine
     on paper (14.8:1 for typed text) but were reported as really hard to read,
     and the ask was black text — which cannot sit on a dark field, so the
     fields themselves go white. Placeholders are a dark grey rather than black
     so a hint can still be told apart from something already typed. */
  --a-field-bg:            #ffffff;
  --a-field-text:          #000000;
  --a-field-border:        #cbd5e1;
  --a-field-placeholder:   #595959;   /* 7.0:1 on white */
  --a-field-disabled-bg:   #eceff0;
  --a-field-disabled-text: #333333;

  /* Plain buttons. admin.css paints .p-btn WHITE and takes its text from
     --p-text — which this theme maps to near-white, so "Pay out" and
     "Approve pending" rendered white-on-white. Dark green on the white button. */
  --a-btn-text:            #0b5a2c;   /* 8.2:1 on white */
  --a-btn-disabled-bg:     #dfe8e2;
  --a-btn-disabled-text:   #3f5f4c;   /* 5.6:1 on the disabled fill */

  /* ---- status ---- */
  --a-warn:       #f5c451;
  --a-danger:     #f4685f;

  --a-radius:     14px;
  --a-radius-sm:  9px;

  /* -------------------------------------------------------------------------
     admin.css token overrides. THIS is what retints the eleven existing tabs:
     every p-card, p-table, p-input and p-badge reads these, so they go dark
     without being edited. Names are admin.css's, not ours.
     ------------------------------------------------------------------------- */
  --p-bg:           var(--a-bg);
  --p-surface:      var(--a-surface);
  --p-card:         var(--a-surface);
  --p-border:       var(--a-border);
  --p-text:         var(--a-text);
  --p-text-muted:   var(--a-text-dim);
  --p-heading:      var(--a-text);
  --p-primary:      #2563eb;
  --p-primary-text: #ffffff;
  --p-success:      var(--a-green-500);
  --p-warning:      var(--a-warn);
  --p-danger:       var(--a-danger);
  --p-accent:       #2563eb;
  --p-input-bg:     var(--a-field-bg);
  --p-shadow:       0 1px 3px rgba(15,23,42,.08);
}

/* Plain (white) buttons: dark green text instead of the theme's near-white.
   Primary (green) and danger (red outline) keep their own colours. */
.p-btn:not(.p-btn-primary):not(.p-btn-danger) {
  color: var(--a-btn-text);
}
.p-btn:not(.p-btn-primary):not(.p-btn-danger):hover {
  color: var(--a-btn-text);
}
/* Danger buttons are also white, and the theme's light red (--a-danger, made
   for the dark page) measured 3.0:1 on them. A darker red for the text only;
   the hover fill is unchanged. */
.p-btn-danger:not(:hover):not([disabled]) {
  color: #b42318;          /* 6.5:1 on white */
  border-color: #b42318;
}
/* Disabled: admin.css only fades the button to 55%, which over this dark page
   turns a white button grey and its text unreadable. A solid light fill with
   dark text still reads as "not available" without disappearing. */
.p-btn:not(.p-btn-primary):not(.p-btn-danger)[disabled] {
  opacity: 1;
  background: var(--a-btn-disabled-bg);
  border-color: var(--a-btn-disabled-bg);
  color: var(--a-btn-disabled-text);
}

/* ---- Community (migration 085) ------------------------------------------ */
/* Centred in the main column, like a social feed. */
.a-community { max-width: 780px; margin-left: auto; margin-right: auto; }
.a-composer { margin-bottom: 16px; position: relative; }
.a-composer-text { width: 100%; resize: vertical; min-height: 76px; line-height: 1.5; }
.a-composer-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.a-composer-attach {
  display: inline-flex; gap: 6px; align-items: center;
  color: var(--a-text-dim); font-size: 13px; cursor: pointer;
}
.a-composer-attach:hover { color: var(--a-green-300); }
.a-composer-attach svg, .a-post-action svg, .a-btn svg { width: 15px; height: 15px; }
.a-composer-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--a-text); cursor: pointer; }
.a-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.a-post { margin-bottom: 14px; }
.a-post-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.a-post-author { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.a-post-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: rgba(34,197,94,.14); color: var(--a-green-300);
}
.a-post-pinned { display: inline-flex; gap: 3px; align-items: center; font-size: 11.5px; font-weight: 600; color: var(--a-green-300); }
.a-post-pinned svg { width: 12px; height: 12px; }
.a-post-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 12px; line-height: 1.55; font-size: 14px; }
.a-post-media { margin: 0 0 12px; }
.a-post-media img, .a-post-media video {
  display: block; max-width: 100%; max-height: 560px;
  border-radius: var(--a-radius-sm); border: 1px solid var(--a-border); background: #000;
}
.a-post-actions { display: flex; gap: 4px; border-top: 1px solid var(--a-border-soft); padding-top: 8px; }
.a-post-action {
  display: inline-flex; gap: 6px; align-items: center; background: none; border: 0;
  color: var(--a-text-dim); font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.a-post-action:hover { background: var(--a-border-soft); color: var(--a-text); }
.a-post-action.is-on { color: var(--a-green-400); }
.a-post-action:focus-visible, .a-post-menu-btn:focus-visible { outline: 2px solid var(--a-green-400); outline-offset: 2px; }

.a-post-menu { position: relative; }
.a-post-menu-btn {
  background: none; border: 0; color: var(--a-text-dim); font-size: 20px; line-height: 1;
  padding: 2px 8px; border-radius: 8px; cursor: pointer;
}
.a-post-menu-btn:hover { background: var(--a-border-soft); color: var(--a-text); }
.a-post-menu-list {
  position: absolute; right: 0; top: 100%; z-index: 20; min-width: 200px; padding: 4px;
  background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.a-post-menu-list button {
  display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--a-text);
  font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.a-post-menu-list button:hover { background: var(--a-border-soft); }
.a-post-menu-list button.is-danger { color: var(--a-danger); }

.a-comments { border-top: 1px solid var(--a-border-soft); margin-top: 8px; padding-top: 12px; }
.a-comment { display: flex; gap: 10px; margin-bottom: 10px; }
.a-comment .a-avatar { width: 30px; height: 30px; font-size: 11px; flex: 0 0 30px; }
.a-comment-body {
  flex: 1; min-width: 0; padding: 8px 11px;
  background: var(--a-bg); border: 1px solid var(--a-border-soft); border-radius: 10px;
}
.a-comment-body p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.5; }
.a-comment-delete { background: none; border: 0; color: var(--a-text-faint); font: inherit; font-size: 12px; cursor: pointer; }
.a-comment-delete:hover { color: var(--a-danger); }

/* ---- Admin: profile links, profile view, program overview ---------------- */
/* A name that opens that affiliate's portal (admins only). */
.a-link { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(110,240,160,.45); text-underline-offset: 3px; }
.a-link:hover { color: var(--a-green-300); text-decoration-color: currentColor; }

.a-viewas {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px;
  border: 1px solid rgba(245,196,81,.55); border-radius: var(--a-radius-sm);
  background: rgba(245,196,81,.10); color: var(--a-text); font-size: 13.5px;
}
.a-viewas svg { width: 16px; height: 16px; color: var(--a-warn); }
.a-viewas .a-btn { margin-left: auto; }

.a-program { margin-bottom: 8px; }
.a-section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.a-section-head h2, .a-section-title { margin: 0; font-size: 17px; font-weight: 700; }
.a-section-title { margin: 6px 0 14px; padding-top: 14px; border-top: 1px solid var(--a-border-soft); }
.a-program-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 1100px) { .a-program-grid { grid-template-columns: 1fr; } }
.a-kpis.a-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 560px) { .a-kpis.a-kpis-4 { grid-template-columns: 1fr; } }

/* Program analytics tiles (Analytics tab, admins). Fifteen small figures read
   as a table of measurements, not fifteen headline cards — the KPI card's
   weight would make every ratio look like a headline. */
.a-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; }
.a-stat-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.a-stat {
  padding: 12px 14px;
  border: 1px solid var(--a-border-soft);
  border-radius: 10px;
  background: var(--a-surface-2);
}
.a-stat-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--a-text-faint);
  /* Two lines' worth even when the label needs one, so the figures line up
     across a row instead of stepping down under the longer labels. */
  min-height: 2.8em; line-height: 1.4;
}
.a-stat-value { margin-top: 6px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-stat-note { margin-top: 3px; font-size: 11.5px; color: var(--a-text-faint); }

/* Mini calendar — the Calendar tab's data at a glance. */
.a-minical { margin: 0; }
.a-minical .a-panel-head { gap: 6px; }
.a-minical-head, .a-minical-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.a-minical-head span { text-align: center; font-size: 11px; font-weight: 600; color: var(--a-text-faint); padding: 2px 0; }
.a-minical-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 0 4px; border-radius: 7px; font-size: 12.5px; color: var(--a-text);
}
.a-minical-cell.is-outside { color: var(--a-text-faint); opacity: .55; }
.a-minical-cell.is-today { background: rgba(34,197,94,.16); box-shadow: inset 0 0 0 1px var(--a-green-500); font-weight: 700; }
.a-minical-dots { display: flex; gap: 2px; min-height: 5px; }
.a-minical-dots i, .a-minical-foot i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; }
.a-minical i.s { background: var(--a-green-400); }
.a-minical i.e { background: #3b82f6; }
.a-minical i.e.k-sale { background: #f5c451; }
.a-minical i.e.k-promo { background: #a855f7; }
.a-minical i.e.k-launch { background: #38bdf8; }
.a-minical-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--a-text-dim); }
.a-minical-foot .a-panel-link { margin-left: auto; }

html, body {
  background: var(--a-bg);
  color: var(--a-text);
}

body {
  /* Radial washes rather than a flat fill. The dashboard is mostly empty
     ground; a dead-flat black makes the cards look like they are floating on
     nothing, and two very low-opacity pools give the page a light source the
     cards can sit in. */
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(700px 420px at 96% 4%, rgba(16,185,129,.07), transparent 62%);
  background-attachment: fixed;
}

/* =============================================================================
   Shell
   ========================================================================== */
.a-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- sidebar ---- */
.a-side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 14px 16px;
  background: var(--a-bg-2);
  border-right: 1px solid var(--a-border-soft);
  overflow-y: auto;
}

.a-side-logo {
  display: block;
  margin: 0 auto 22px;
  height: 74px;
  width: auto;
}

.a-nav { display: flex; flex-direction: column; gap: 3px; }

.a-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--a-radius-sm);
  background: transparent;
  color: var(--a-text-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.a-nav-item:hover { background: rgba(34,197,94,.09); color: var(--a-text); }

.a-nav-item.is-active {
  background: linear-gradient(90deg, var(--a-green-500), var(--a-green-600));
  color: #04120a;
  font-weight: 600;
  box-shadow: var(--a-glow);
}

/* Icons are inline SVG with currentColor, so the active pill inverts them for
   free — no second icon set for the active state. */
.a-nav-item svg { width: 18px; height: 18px; flex: none; }

.a-nav-count {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--a-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.a-nav-item.is-active .a-nav-count { background: #04120a; color: var(--a-green-300); }

.a-side-promo {
  margin-top: auto;
  padding: 16px 6px 10px;
  text-align: center;
}
.a-side-promo img { width: 100%; max-width: 168px; height: auto; border-radius: 12px; }
.a-side-promo p {
  margin: 10px 0 0;
  color: var(--a-green-300);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.7;
  text-transform: uppercase;
}

/* ---- topbar ---- */
.a-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--a-border-soft);
}

.a-search {
  position: relative;
  flex: 1;
  max-width: 460px;
}
.a-search input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border: 1px solid var(--a-field-border);
  border-radius: 999px;
  background: var(--a-field-bg);
  color: var(--a-field-text);
  font: inherit;
  font-size: 14px;
}
.a-search input::placeholder { color: var(--a-field-placeholder); opacity: 1; }
.a-search input:focus {
  outline: none;
  border-color: var(--a-green-500);
  box-shadow: var(--a-glow);
}
.a-search svg {
  position: absolute;
  left: 14px; top: 50%;
  width: 16px; height: 16px;
  color: var(--a-field-placeholder);
  transform: translateY(-50%);
  pointer-events: none;
}

.a-whoami {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--a-border);
  border-radius: 999px;
  background: var(--a-surface);
}
.a-avatar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--a-green-500);
  border-radius: 50%;
  background: var(--a-surface-2);
  color: var(--a-green-300);
  font-size: 13px;
  font-weight: 700;
  object-fit: cover;
  overflow: hidden;
}
.a-whoami-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.a-whoami-role { color: var(--a-text-dim); font-size: 12px; line-height: 1.25; }

.a-main { padding: 22px 28px 56px; }

/* =============================================================================
   Page head
   ========================================================================== */
.a-pagehead {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.a-pagehead h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.a-pagehead-title { display: flex; align-items: center; gap: 14px; }

/* The ringed glyph beside the page title. Outlined rather than filled, so it
   reads as a section marker and does not compete with the filled KPI icons
   directly beneath it. */
.a-page-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 2px solid var(--a-green-500);
  border-radius: 50%;
  color: var(--a-green-400);
  flex: none;
}
.a-page-icon svg { width: 22px; height: 22px; }
.a-pagesub { margin: 4px 0 0; color: var(--a-text-dim); font-size: 13.5px; }

/* The window this screen is showing, as a control that looks like the date
   pill in the design and behaves like the range selector that exists. */
.a-range {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  padding: 9px 14px;
  border: 1px solid var(--a-field-border);
  border-radius: var(--a-radius-sm);
  /* A field like every other: white, black text. */
  background: var(--a-field-bg);
  color-scheme: light;
}
.a-range svg { width: 16px; height: 16px; color: var(--a-green-500); flex: none; }
.a-range select {
  border: 0;
  background: none;
  color: var(--a-field-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.a-range select:focus { outline: none; }
.a-range option { background: var(--a-field-bg); color: var(--a-field-text); }

/* The custom-range dates, inline in the same pill as the preset dropdown.
   color-scheme must match the field: it decides the palette of the native
   date picker and of the little calendar glyph inside the box. The fields are
   white now, so it is `light` — `dark` would draw a pale glyph on white. */
.a-range-dates { display: inline-flex; align-items: center; gap: 6px; }
.a-range-dash { color: var(--a-field-placeholder); }
.a-range-date {
  color-scheme: light;
  padding: 4px 7px;
  border: 1px solid var(--a-field-border);
  border-radius: 6px;
  background: var(--a-field-bg);
  color: var(--a-field-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.a-range-date:focus-visible { outline: 2px solid var(--a-green-400); outline-offset: 1px; }

@media (max-width: 640px) {
  /* Two date fields plus a select will not sit on one line on a phone. */
  .a-range { flex-wrap: wrap; }
  .a-range-dates { width: 100%; }
  .a-range-date { flex: 1 1 0; min-width: 0; }
}
.a-pagehead .a-welcome { margin: 3px 0 0; color: var(--a-text-dim); font-size: 14px; }
.a-pagehead .a-welcome b { color: var(--a-green-400); font-weight: 600; }

.a-tagline {
  padding-left: 26px;
  border-left: 1px solid var(--a-border);
  color: var(--a-text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.8;
  text-transform: uppercase;
}

/* =============================================================================
   KPI cards
   ========================================================================== */
.a-kpis {
  display: grid;
  /* auto-fit, not a fixed 6: the row has to survive a narrow laptop without a
     media query per breakpoint, and six 190px cards is already 1140px. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

/* Three wide tiles rather than six narrow ones. The Earnings screen has three
   headline figures and they carry longer money strings; auto-fit at 190px
   would leave them stranded at a third of the row on a wide display. */
.a-kpis-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.a-kpis-3 .a-kpi-value { font-size: 31px; }
.a-kpis-3 .a-kpi-icon { width: 44px; height: 44px; }
.a-kpis-3 .a-kpi-icon svg { width: 21px; height: 21px; }

.a-kpi {
  padding: 16px 18px 15px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: linear-gradient(160deg, var(--a-surface), #f1f5f9);
}
.a-kpi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.a-kpi-icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--a-green-500);
  color: #04120a;
  flex: none;
}
.a-kpi-icon svg { width: 17px; height: 17px; }
.a-kpi-label { color: var(--a-text-dim); font-size: 13px; font-weight: 500; }
.a-kpi-value { font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.a-kpi-foot { display: flex; align-items: baseline; gap: 7px; margin-top: 7px; font-size: 12px; }
.a-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.a-delta.up   { color: var(--a-green-400); }
.a-delta.down { color: var(--a-danger); }
.a-delta.flat { color: var(--a-text-faint); }
.a-kpi-vs { color: var(--a-text-faint); }

/* =============================================================================
   Panels — the dashboard's own card, distinct from admin.css's .p-card so the
   two can coexist while the other tabs are still on the old component.
   ========================================================================== */
.a-panel {
  display: flex;
  flex-direction: column;
  padding: 17px 19px 19px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: var(--a-surface);
  min-width: 0;
}
.a-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.a-panel-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.a-panel-link {
  margin-left: auto;
  color: var(--a-green-400);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.a-panel-link:hover { text-decoration: underline; }

.a-grid { display: grid; gap: 16px; margin-bottom: 16px; align-items: start; }
.a-grid-3 { grid-template-columns: minmax(0,1.55fr) minmax(0,1.15fr) minmax(0,.95fr); }
.a-grid-2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

/* =============================================================================
   Data table
   ========================================================================== */
.a-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.a-table th {
  padding: 0 10px 9px 0;
  border-bottom: 1px solid var(--a-border-soft);
  color: var(--a-text-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.a-table td {
  padding: 11px 10px 11px 0;
  border-bottom: 1px solid var(--a-border-soft);
  vertical-align: middle;
}
.a-table tr:last-child td { border-bottom: 0; }
/* Right-aligned numerics. The zero right-padding is only correct for the LAST
   column — a right-aligned amount followed by a status chip collided with it,
   and the two headers ran together as "AMOUNTSTATUS". */
.a-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.a-table td.num:last-child, .a-table th.num:last-child { padding-right: 0; }
.a-table td.num:not(:last-child), .a-table th.num:not(:last-child) { padding-right: 22px; }
.a-table a { color: var(--a-text); text-decoration: none; }
.a-table a:hover { color: var(--a-green-400); }

/* =============================================================================
   Form controls
   =============================================================================

   admin.css sets `.p-input/.p-select/.p-textarea { background: #fff }` as a
   LITERAL, not a token, so the dark palette never reached them — and it
   defines no ::placeholder rule anywhere, leaving every field to the
   browser's default, which derives from the input's own colour and lands
   almost invisible here.

   These rules are the one place the portal's fields are themed. They target
   the p-* classes because all eleven original tabs are built from them, plus
   bare input/select/textarea for anything authored since.

   DELIBERATELY UNSCOPED. They were scoped to .a-shell (the signed-in console),
   which left the signed-out screens — login, claim, password reset, register —
   on admin.css's literal `background: #fff`: white boxes on a dark page. This
   file is linked by affiliate-portal/index.html and by nothing else, so a bare
   `input` selector here cannot reach the storefront or the admin portal. The
   signed-out views live in .p-shell and the console in .a-shell; unscoping is
   what covers both without maintaining two copies of every rule. */
.p-input,
.p-select,
.p-textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select {
  background: var(--a-field-bg);
  color: var(--a-field-text);
  border: 1px solid var(--a-field-border);
  border-radius: var(--a-radius-sm);
  /* The native parts — dropdown arrow, date-picker glyph and popup, number
     spinners — follow color-scheme, not `color`. On a white field they must be
     the light versions or the calendar glyph vanishes into the box. */
  color-scheme: light;
}

.p-input:focus,
.p-select:focus,
.p-textarea:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--a-green-500);
  box-shadow: var(--a-glow);
}

/* The fix the portal was actually missing. Stated for every field type rather
   than once on a wrapper: ::placeholder does not inherit. */
input::placeholder,
textarea::placeholder,
.p-input::placeholder,
.p-textarea::placeholder {
  color: var(--a-field-placeholder);
  opacity: 1;   /* Firefox dims placeholders to .54 by default. */
}

/* Browser autofill paints its own tinted background and ignores `background`,
   so a saved email or password could land on a colour this file never chose.
   The inset shadow repaints the box white and -webkit-text-fill-color is the
   only colour autofill honours. The long transition stops the tint flashing. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--a-field-text);
  caret-color: var(--a-field-text);
  box-shadow: 0 0 0 1000px var(--a-field-bg) inset;
  transition: background-color 9999s ease-out 0s;
}
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--a-field-text);
  box-shadow: 0 0 0 1000px var(--a-field-bg) inset, var(--a-glow);
}

/* Native dropdowns render their list in the OS layer, which does not inherit
   the page's colours — an unstyled <option> is black-on-white inside a dark
   control on some platforms and unreadable on others. Both are set here. */
select option,
select optgroup {
  background: var(--a-field-bg);
  color: var(--a-field-text);
}

/* A disabled field is still meant to be READ — it shows a value the person
   cannot change, like their account type. admin.css drops it to opacity .6,
   which on this ground is a guess at legibility; this states it. */
.p-input[disabled],
.p-select[disabled],
.p-textarea[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
  opacity: 1;
  color: var(--a-field-disabled-text);
  background: var(--a-field-disabled-bg);
  border-color: var(--a-field-border);
  cursor: not-allowed;
}

/* Field labels sat on --p-text-muted, which the dark theme maps to the dim
   step. A label naming the field beneath it is not secondary text. */
.p-label { color: var(--a-text); }
.p-help,
.p-meta { color: var(--a-text-dim); }

/* ---- segmented control (Leaderboard "rank by") ---- */
.a-segmented { display: flex; gap: 8px; flex-wrap: wrap; }
.a-seg {
  padding: 9px 18px;
  border: 1px solid var(--a-border);
  border-radius: 999px;
  background: var(--a-surface);
  color: var(--a-text-dim);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.a-seg:hover { border-color: var(--a-green-500); color: var(--a-text); }
.a-seg.is-on {
  border-color: var(--a-green-500);
  background: var(--a-green-500);
  color: #04120a;
  box-shadow: var(--a-glow);
}

/* ---- rank medals ---- */
.a-rank {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--a-border);
  border-radius: 50%;
  background: var(--a-surface-2);
  font-size: 13px;
  font-weight: 700;
}
/* Gold, silver and bronze for the top three. The glyph is the same chess-queen
   character at three tints rather than three emoji: emoji render at wildly
   different sizes across platforms and would make the column jump. */
.a-rank.r1 { border-color: #e3b341; background: rgba(227,179,65,.14); color: #f0c855; font-size: 17px; }
.a-rank.r2 { border-color: #b8c4cc; background: rgba(184,196,204,.13); color: #cdd8de; font-size: 17px; }
.a-rank.r3 { border-color: #cd7f32; background: rgba(205,127,50,.14); color: #e09a58; font-size: 17px; }
.a-table tr.is-me td { background: rgba(34,197,94,.09); font-weight: 600; }

/* ---- calendar ---- */
.a-cal-head, .a-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.a-cal-head {
  border-bottom: 1px solid var(--a-border);
  background: var(--a-surface-2);
}
.a-cal-head > div {
  padding: 11px 12px;
  color: var(--a-text-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
}
.a-cal-cell {
  min-height: 96px;
  padding: 9px 11px;
  border-right: 1px solid var(--a-border-soft);
  border-bottom: 1px solid var(--a-border-soft);
}
.a-cal-cell:nth-child(7n) { border-right: 0; }
.a-cal-cell:nth-last-child(-n+7) { border-bottom: 0; }
/* Days from the neighbouring months are present so the grid keeps its shape,
   and dimmed so they are not mistaken for this month's. */
.a-cal-cell.is-outside { opacity: .34; }
.a-cal-day { display: inline-block; font-size: 14px; font-weight: 600; }
.a-cal-cell.is-today .a-cal-day {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--a-green-500);
  color: #04120a;
}
.a-cal-sales {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: var(--a-green-400);
  font-size: 12.5px;
  font-weight: 500;
}
.a-cal-sales i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.a-month { font-size: 17px; font-weight: 700; min-width: 168px; text-align: center; }

/* ---- programme events in a calendar square ----
   A FILLED CHIP, not another dot. The square already carries the affiliate's
   own sales as a green dot + label; an authored event is a different kind of
   fact, and two dot-rows would read as one list of the same thing. */
.a-cal-ev {
  display: block;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 5px;
  border-left: 3px solid currentColor;
  background: rgba(34,197,94,.13);
  color: var(--a-green-300);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}
/* Kind-coloured, so a launch is not mistaken for a discount at a glance. */
.a-cal-ev.k-sale   { color: #6ef0a0; background: rgba(34,197,94,.15); }
.a-cal-ev.k-promo  { color: #f5c451; background: rgba(245,196,81,.14); }
.a-cal-ev.k-launch { color: #7fb4f5; background: rgba(127,180,245,.14); }
.a-cal-ev.k-event  { color: #c69bf0; background: rgba(198,155,240,.14); }
/* A draft is visible only to admins; it must not look like a live announcement. */
.a-cal-ev.is-draft { opacity: .6; border-left-style: dashed; }

/* The per-day add button. Hidden until the square is hovered or focused
   within, so 42 plus-signs do not compete with the content. */
.a-cal-add {
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  padding: 0;
  border: 1px solid var(--a-border);
  border-radius: 5px;
  background: var(--a-surface-2);
  color: var(--a-text-dim);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}
.a-cal-cell { position: relative; }
.a-cal-cell:hover .a-cal-add,
.a-cal-add:focus-visible { opacity: 1; }
.a-cal-add:hover { border-color: var(--a-green-500); color: var(--a-green-300); }

/* ---- the month's events, listed under the grid ---- */
.a-ev-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--a-border-soft);
}
.a-ev-row:last-child { border-bottom: 0; }
.a-ev-kind {
  flex: none;
  min-width: 74px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(34,197,94,.14);
  color: var(--a-green-300);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}
.a-ev-kind.k-promo  { color: #f5c451; background: rgba(245,196,81,.14); }
.a-ev-kind.k-launch { color: #7fb4f5; background: rgba(127,180,245,.14); }
.a-ev-kind.k-event  { color: #c69bf0; background: rgba(198,155,240,.14); }
.a-btn-sm { padding: 6px 11px; font-size: 12px; }

/* ---- settings forms ---- */
.a-formgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.a-formgrid > div { min-width: 0; }
.a-formgrid .p-input, .p-input[disabled] { width: 100%; }
.p-input[disabled] { opacity: .6; cursor: not-allowed; }

@media (max-width: 760px) {
  .a-cal-cell { min-height: 72px; padding: 6px 7px; }
  .a-cal-sales { font-size: 11px; gap: 5px; }
  .a-cal-head > div { padding: 8px 7px; font-size: 9.5px; }
}

/* Product thumbnails in the table. Fixed box so a portrait and a landscape
   image occupy the same space and the name column starts on one line. */
.a-thumb {
  width: 30px; height: 30px;
  border: 1px solid var(--a-border);
  border-radius: 7px;
  background: var(--a-surface-2);
  object-fit: cover;
  flex: none;
}
.a-thumb-blank { display: grid; place-items: center; color: var(--a-text-faint); }
.a-thumb-blank svg { width: 15px; height: 15px; }

/* The glyph beside a panel heading — smaller and unringed, so it reads as a
   label rather than competing with the page title's ringed icon. */
.a-panel-glyph { display: inline-grid; place-items: center; color: var(--a-green-400); flex: none; }
.a-panel-glyph svg { width: 18px; height: 18px; }

/* Bars and sparklines. */
.a-chart .bar { fill: url(#none); fill: var(--a-green-500); opacity: .92; }
.a-chart .bar:hover { opacity: 1; }
.a-chart .val { fill: var(--a-text-dim); font-size: 11px; }
.a-spark {
  display: block;
  width: 96px; height: 26px;
  overflow: visible;
}
.a-spark polyline { fill: none; stroke: var(--a-green-400); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

/* Sortable headers. The whole header is the button so the hit target is the
   cell, not the four-pixel caret. */
.a-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.a-sort:hover { color: var(--a-green-400); }
.a-sort.is-on { color: var(--a-green-400); }
.a-sort-caret { opacity: .55; font-size: 11px; }
.a-sort.is-on .a-sort-caret { opacity: 1; }
.a-table-sortable th.num .a-sort { flex-direction: row-reverse; }

/* The exact timestamp under the relative one. */
.a-sub { margin-top: 2px; color: var(--a-text-faint); font-size: 11.5px; }

.a-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.a-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.a-chip.ok      { color: var(--a-green-400); }
.a-chip.pending { color: var(--a-warn); }
.a-chip.bad     { color: var(--a-danger); }
.a-chip.muted   { color: var(--a-text-faint); }

/* =============================================================================
   Links & codes
   ========================================================================== */
.a-field-label {
  display: block;
  margin: 0 0 6px;
  color: var(--a-text-dim);
  font-size: 12px;
  font-weight: 600;
}
.a-copyrow { display: flex; gap: 8px; margin-bottom: 14px; }
.a-copyrow input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--a-field-border);
  border-radius: var(--a-radius-sm);
  background: var(--a-field-bg);
  color: var(--a-field-text);
  font: inherit;
  font-size: 13px;
  color-scheme: light;
}
.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius-sm);
  background: var(--a-surface-2);
  color: var(--a-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
  white-space: nowrap;
}
.a-btn:hover { border-color: var(--a-green-500); color: var(--a-green-300); }
.a-btn-primary {
  border-color: var(--a-green-500);
  background: var(--a-green-500);
  color: #04120a;
}
.a-btn-primary:hover { background: var(--a-green-400); border-color: var(--a-green-400); color: #04120a; }
.a-btn-block { width: 100%; margin-bottom: 8px; }
.a-btn svg { width: 15px; height: 15px; }

/* =============================================================================
   Chart
   ========================================================================== */
.a-legend { display: flex; gap: 18px; justify-content: center; margin-bottom: 6px; font-size: 12px; color: var(--a-text-dim); }
.a-legend span { display: inline-flex; align-items: center; gap: 7px; }
.a-legend i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.a-chart { display: block; width: 100%; height: auto; overflow: visible; }
.a-chart .grid { stroke: var(--a-border-soft); stroke-width: 1; }
.a-chart .axis { fill: var(--a-text-faint); font-size: 10px; }
.a-chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* =============================================================================
   Earnings summary
   ========================================================================== */
.a-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.a-fact { display: flex; align-items: flex-start; gap: 11px; }
.a-fact-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius-sm);
  background: var(--a-surface-2);
  color: var(--a-green-400);
  flex: none;
}
.a-fact-icon svg { width: 16px; height: 16px; }
.a-fact-label { color: var(--a-text-dim); font-size: 12px; }
.a-fact-value { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }

/* =============================================================================
   Leaderboard
   ========================================================================== */
.a-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 11px; }
.a-board-card {
  padding: 13px 11px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius-sm);
  background: var(--a-surface-2);
  text-align: center;
}
.a-board-card.is-me { border-color: var(--a-green-500); box-shadow: var(--a-glow); }
.a-board-rank { color: var(--a-text-faint); font-size: 15px; font-weight: 700; }
.a-board-name {
  margin: 5px 0 3px;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a-board-value { color: var(--a-green-400); font-size: 14px; font-weight: 700; }

/* =============================================================================
   Empty state — used wherever a panel has no data YET, as opposed to no data
   ever. Saying which is the whole job of this component.
   ========================================================================== */
.a-empty {
  padding: 26px 16px;
  color: var(--a-text-faint);
  font-size: 13px;
  text-align: center;
}

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .a-grid-3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .a-grid-3 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .a-shell { grid-template-columns: 1fr; }
  .a-side {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .a-side-logo { height: 44px; margin: 0 10px 0 0; }
  .a-nav { flex-direction: row; flex-wrap: wrap; }
  .a-nav-item { width: auto; }
  /* The astronaut is decoration; it costs a third of a phone screen above the
     first real number, so it is the one thing that goes. */
  .a-side-promo { display: none; }
  .a-grid-3, .a-grid-2 { grid-template-columns: minmax(0,1fr); }
  .a-grid-3 > :last-child { grid-column: auto; }
  .a-main, .a-top { padding-left: 16px; padding-right: 16px; }
}

/* Group policy & bulk edit */
.a-policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; }

/* =============================================================================
   LIGHT SURFACES CARRY DARK TEXT
   =============================================================================
   admin.css was written for a WHITE portal, and a handful of its surfaces are
   still light inside this dark one: the table header row, the row you hover,
   the order-detail panel (--p-surface-alt), status badges, alerts and tag
   chips. They kept this theme's text colours — near-white, pale green, yellow —
   which measured 1.07:1 on the order details and 1.5:1 on a "pending" badge.

   The rule: a light background gets dark green or near-black text. Done by
   RE-POINTING THE TEXT TOKENS inside each light surface rather than restyling
   what is in it, so every descendant that reads a token — muted captions,
   links, numbers, headings — turns dark on its own, including ones added later.
   Inline panels that paint a light token (style="background:var(--p-…-bg)")
   are matched by attribute, so they are covered without being edited.
   ========================================================================== */
:root {
  --a-ink:        #062010;   /* text on light: 16.6:1 on white */
  --a-ink-dim:    #24503a;   /* captions and headers on light: 8.3:1 */
  --a-ink-link:   #0b5a2c;   /* links, "success" states: 8.2:1 */
  --a-ink-warn:   #7a4a00;   /* "pending", warnings: 7.4:1 */
  --a-ink-danger: #9f1d15;   /* errors, "suspended": 7.9:1 */
  --a-ink-info:   #0b4f8a;   /* info: 8.3:1 */
}

.p-table th,
.p-table tbody tr:hover,
.p-drawer,
.p-drawer-foot,
.p-kanban-col,
.p-badge,
.p-tag,
.p-alert-error,
.p-alert-success,
.p-alert-warning,
[style*="--p-surface-alt"],
[style*="--p-info-bg"],
[style*="--p-warning-bg"],
[style*="--p-danger-bg"],
[style*="--p-primary-bg"],
.a-on-light {
  --p-text:        var(--a-ink);
  --p-heading:     var(--a-ink);
  --a-text:        var(--a-ink);
  --p-text-muted:  var(--a-ink-dim);
  --p-text-subtle: var(--a-ink-dim);
  --a-text-dim:    var(--a-ink-dim);
  --a-text-faint:  var(--a-ink-dim);
  --a-green-300:   var(--a-ink-link);
  --a-green-400:   var(--a-ink-link);
  color: var(--a-ink);
}
/* Header labels are captions, not body text. */
.p-table th { color: var(--a-ink-dim); }

/* Badges, tags and alerts name their text colour explicitly (the theme's
   bright green / yellow / coral, meant for the dark page). On their light
   fills they get the dark shade of the same hue. */
.p-badge-success, .p-tag-green, .p-alert-success { color: var(--a-ink-link); }
.p-badge-warning, .p-tag-amber, .p-alert-warning { color: var(--a-ink-warn); }
.p-badge-danger,  .p-tag-red,   .p-alert-error   { color: var(--a-ink-danger); }
.p-badge-info,    .p-tag-blue                    { color: var(--a-ink-info); }
/* Inline alerts that set `color:var(--p-warning|info|danger)` next to their
   light fill: same treatment, matched by the fill they paint. */
[style*="--p-warning-bg"] { color: var(--a-ink-warn) !important; }
[style*="--p-info-bg"]    { color: var(--a-ink-info) !important; }
[style*="--p-danger-bg"]  { color: var(--a-ink-danger) !important; }

/* Renaming your own /a/ handle, shown wherever the link itself is. */
.a-handle-edit {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--a-border-soft);
}