/* Moderation on the website (/moderation/). The screens were built for the WordPress back end, so this file gives their buttons, tables,
   tabs and cards the site's own look (theme colors, dark mode, phone width). Only applies inside .sr-modfront. */
.sr-modfront{padding:8px 0 40px}
.sr-modfront .pg{max-width:1240px;margin:0 auto;padding:0 16px}
.sr-modfront h1{margin:18px 0 6px;font-size:28px;line-height:1.2}
.sr-modfront h2,.sr-modfront h3{color:var(--ink)}
.sr-modfront .wrap{margin:0;max-width:none}
.sr-modfront p,.sr-modfront label,.sr-modfront small{color:inherit}

/* tabs */
.sr-modfront .nav-tab-wrapper{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 16px!important;padding:0;border:0;font-size:inherit}
.sr-modfront .nav-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;line-height:1.3}
.sr-modfront .nav-tab:hover{border-color:var(--brand)}
.sr-modfront .nav-tab-active,.sr-modfront .nav-tab-active:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* buttons */
.sr-modfront .button{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;min-height:38px;box-sizing:border-box}
.sr-modfront .button:hover{border-color:var(--brand)}
.sr-modfront .button-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.sr-modfront .button-primary:hover{filter:brightness(1.08)}
.sr-modfront .button-small{padding:5px 10px;min-height:32px;font-size:13px}
.sr-modfront .button[disabled]{opacity:.55;cursor:default}
.sr-modfront .button:focus-visible,.sr-modfront .nav-tab:focus-visible,.sr-modfront a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* fields */
.sr-modfront input[type=text],.sr-modfront input[type=search],.sr-modfront input[type=number],.sr-modfront input[type=email],.sr-modfront input[type=url],.sr-modfront input[type=date],.sr-modfront select,.sr-modfront textarea{box-sizing:border-box;max-width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
.sr-modfront textarea{width:100%}
.sr-modfront input[type=checkbox],.sr-modfront input[type=radio]{width:auto;accent-color:var(--brand)}

/* cards and notes */
.sr-modfront .srm-card,.sr-modfront .srp-card{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.sr-modfront .srm-note{color:var(--mute)}
.sr-modfront .srm-q{background:var(--bg);border-left-color:var(--line);color:var(--ink)}
.sr-modfront .srm-ok,.sr-modfront .good{color:#1f7a45}
.sr-modfront .srm-bad,.sr-modfront .bad{color:#c0392b}
.sr-modfront small,.sr-modfront td small,.sr-modfront .srp-c .pm small{color:var(--mute)!important}

/* tables: scroll sideways inside their own box on a phone, never the page */
.sr-modfront .widefat{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;font-size:14px}
.sr-modfront .widefat th,.sr-modfront .widefat td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;color:var(--ink);vertical-align:top}
.sr-modfront .widefat thead th{color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.sr-modfront .widefat.striped>tbody>tr:nth-child(odd){background:color-mix(in srgb,var(--line) 22%,transparent)}
.sr-modfront #sr-mod,.sr-modfront #sr-pr{max-width:100%;overflow-x:auto}
.sr-modfront .srm-t{min-width:640px}

/* chips and badges */
.sr-modfront .srm-chip,.sr-modfront .srp-b{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.sr-modfront .srm-chip.g{background:#d1f0dc;color:#0a5a2a;border-color:transparent}.sr-modfront .srm-chip.r{background:#fbe1e1;color:#8a1c1c;border-color:transparent}.sr-modfront .srm-chip.y{background:#fff1cc;color:#6d4a00;border-color:transparent}.sr-modfront .srm-chip.b{background:#dbe9ff;color:#0a3d91;border-color:transparent}
.sr-modfront .srp-chip{background:var(--card);color:var(--ink);border-color:var(--line)}.sr-modfront .srp-chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* photo review */
.sr-modfront .srp-c{background:var(--card);border-color:var(--line);color:var(--ink)}
.sr-modfront .srp-c.rejected,.sr-modfront .srp-c.red{border-color:#d63638}.sr-modfront .srp-c.hot{border-color:#dba617}
.sr-modfront .srp-b.p{background:#dbe9ff;color:#0a3d91;border-color:transparent}.sr-modfront .srp-b.s{background:#fff1cc;color:#6d4a00;border-color:transparent}.sr-modfront .srp-b.x{background:#fbd5d5;color:#8a1f1f;border-color:transparent}
.sr-modfront .srp-box{background:var(--card);color:var(--ink)}
.sr-modfront .srp-c .pa .button{min-height:34px;padding:6px 8px}

@media(max-width:640px){
  .sr-modfront h1{font-size:24px}
  .sr-modfront .nav-tab{padding:6px 11px;font-size:13px}
  .sr-modfront .srm-bar>*,.sr-modfront .srm-grid>*{min-width:0}
  .sr-modfront .srm-bar input[type=text],.sr-modfront .srm-bar select{width:100%}
}

/* dark mode: same switch the rest of the site uses */
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]) .sr-modfront .srm-chip.g{background:#173a28;color:#a8e6c3}
  :root:not([data-theme=light]) .sr-modfront .srm-chip.r{background:#4a1f26;color:#ffd0d4}
  :root:not([data-theme=light]) .sr-modfront .srm-chip.y{background:#3a2a10;color:#ffd9a0}
  :root:not([data-theme=light]) .sr-modfront .srm-chip.b,:root:not([data-theme=light]) .sr-modfront .srp-b.p{background:#17294d;color:#b7cdff}
  :root:not([data-theme=light]) .sr-modfront .srp-b.s{background:#3a2a10;color:#ffd9a0}
  :root:not([data-theme=light]) .sr-modfront .srp-b.x{background:#4a1f26;color:#ffd0d4}
  :root:not([data-theme=light]) .sr-modfront .srm-ok,:root:not([data-theme=light]) .sr-modfront .good{color:#6fd19b}
  :root:not([data-theme=light]) .sr-modfront .srm-bad,:root:not([data-theme=light]) .sr-modfront .bad{color:#ff8f86}
  :root:not([data-theme=light]) .sr-modfront{color-scheme:dark}
}
:root[data-theme=dark] .sr-modfront .srm-chip.g{background:#173a28;color:#a8e6c3}
:root[data-theme=dark] .sr-modfront .srm-chip.r{background:#4a1f26;color:#ffd0d4}
:root[data-theme=dark] .sr-modfront .srm-chip.y{background:#3a2a10;color:#ffd9a0}
:root[data-theme=dark] .sr-modfront .srm-chip.b,:root[data-theme=dark] .sr-modfront .srp-b.p{background:#17294d;color:#b7cdff}
:root[data-theme=dark] .sr-modfront .srp-b.s{background:#3a2a10;color:#ffd9a0}
:root[data-theme=dark] .sr-modfront .srp-b.x{background:#4a1f26;color:#ffd0d4}
:root[data-theme=dark] .sr-modfront .srm-ok,:root[data-theme=dark] .sr-modfront .good{color:#6fd19b}
:root[data-theme=dark] .sr-modfront .srm-bad,:root[data-theme=dark] .sr-modfront .bad{color:#ff8f86}
:root[data-theme=dark] .sr-modfront{color-scheme:dark}

/* Affiliates tab (the affiliate tool's own markup) */
.sr-modfront #sr-reps{max-width:100%;overflow-x:auto}
.sr-modfront #sr-reps .tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sr-modfront #sr-reps .tabs a{margin:0;padding:6px 13px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:600}
.sr-modfront #sr-reps .tabs a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.sr-modfront #sr-reps .card{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.sr-modfront #sr-reps table{background:var(--card);border:1px solid var(--line);color:var(--ink);min-width:640px}
.sr-modfront #sr-reps th{background:color-mix(in srgb,var(--line) 30%,transparent);color:var(--mute)}
.sr-modfront #sr-reps td,.sr-modfront #sr-reps th{border-bottom:1px solid var(--line)}
.sr-modfront #sr-reps a{color:var(--brand)}.sr-modfront #sr-reps .tabs a.on,.sr-modfront #sr-reps .button-primary{color:#fff}
.sr-modfront #sr-reps .sr-pill{color:#1b2333}
.sr-modfront #sr-reps .msg{color:#1b2333}
.sr-modfront #sr-reps .description,.sr-modfront #sr-reps small{color:var(--mute)}
.sr-modfront #sr-reps .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media(max-width:640px){.sr-modfront #sr-reps input[type=text],.sr-modfront #sr-reps input[type=email],.sr-modfront #sr-reps select{min-width:0;width:100%}}
@media(max-width:640px){.sr-modfront #sr-reps #addl{float:none!important;display:flex;margin:8px 0}}