/*Affiliate*/
/* ---------------------------------------------------------------------------
Affiliate front-end scale.
The dashboard grew section by section and its surfaces drifted with it: six
corner radii, six border colours and three card backgrounds, none of them
decided. These are the values the components below are built from, declared
as variables so a single edit moves the whole dashboard.
Deliberately NOT creator-facing: these are structure, not brand. Every
colour a creator can already set -- the 36 --scp-aff-* theme properties --
keeps driving exactly what it drove before.
--------------------------------------------------------------------------- */
#scp-primary {
--scp-aff-radius: 8px;
--scp-aff-radius-lg: 12px;
--scp-aff-surface: #ffffff;
--scp-aff-sunken: #f4f8f7;
--scp-aff-line: #e3e9e8;
--scp-aff-line-soft: #eef3f2;
--scp-aff-line-strong: #d3dedd;
--scp-aff-muted: #707070;
}
/* A focused field says so. Derived from the creator's accent, so it is their
colour ringing the input and not a second blue from nowhere. */
body #scp-primary .scp-aff-input-wrap:focus-within {
border-color: var(--scp-aff-primary-bg, #00ccc8);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 22%, transparent);
}
#scp-primary .scp-aff-container { display: flex; min-height: calc(100vh - 114px); max-width: 100%; margin: 0 auto; max-width: 1050px; border: 1px solid var(--border); border-radius: 5px; overflow: hidden;}
#scp-primary .scp-aff-container { gap: 0 30px; border: 0; border-radius: 0; }
#scp-primary .scp-aff-container .scp-aff-main-content,
#scp-primary .scp-aff-container .scp-aff-sidebar{ border: 1px solid var(--border); border-radius: 5px; }
body #scp-primary .scp-default-leftside-layout .scp-aff-container { max-width: 1330px; }
#scp-primary .scp-aff-sidebar { width: var(--scp-aff-menu-sidebar-width, 250px); background: var(--scp-aff-menu-bg, #2c3e50); padding: 0 0; position: relative; }
#scp-primary .scp-aff-sidebar::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%); }
#scp-primary .scp-aff-nav-item { display: flex ; align-items: center; padding: 15px 25px; color: var(--scp-aff-menu-text, #ecf0f1)!important; text-decoration: none; transition: all 0.3s ease; cursor: pointer; gap: 10px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--scp-aff-menu-active-border, #d8d8d8); line-height: 1.3; letter-spacing: 0.7px; text-decoration: none!important;}
#scp-primary .scp-aff-nav-item:hover,
#scp-primary .scp-aff-nav-item.active { background: var(--scp-aff-menu-active-bg, #3c5671); border-left-color: var(--scp-aff-menu-active-border, #97acab); box-shadow: none; color: var(--scp-aff-menu-active-text, #ffffff)!important;}
#scp-primary .scp-aff-nav-item i { margin-right: 12px; width: 20px; font-size: 16px; }
#scp-primary .scp-aff-main-content { flex: 1; padding: 30px; background: #f8f9fa; overflow-y: auto; }
#scp-primary .scp-aff-page-header { margin-bottom: 30px; }
#scp-primary .scp-aff-page-title { font-size: 28px; font-weight: 600; color: #2c3e50; margin-bottom: 8px; }
#scp-primary .scp-aff-page-subtitle { color: #808080; font-size: 15px; letter-spacing: 0.4pc;}
#scp-primary .scp-aff-main-content .scp-aff-content-section { display: none; }
#scp-primary .scp-aff-main-content .scp-aff-content-section.active { display: block; }
#scp-primary .scp-aff-stats-grid { display: flex; gap: 14px; margin-bottom: 20px; }
body #scp-primary .scp-aff-stats-grid { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; }
body #scp-primary .scp-aff-card-header.scp-aff-no-border { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }
#scp-primary .scp-aff-stat-card { background: var(--scp-aff-surface, #ffffff); padding: 16px 18px; border-radius: var(--scp-aff-radius-lg, 12px); border: 1px solid var(--scp-aff-line, #e3e9e8); transition: border-color .15s ease; position: relative; overflow: hidden; }
#scp-primary .scp-aff-stat-card::before { content: none; }
#scp-primary .scp-aff-stat-card:hover { transform: none; box-shadow: none; border-color: var(--scp-aff-line-strong, #c3d3d1); }
#scp-primary .scp-aff-stat-title { font-size: 14px; color: #808080; margin-bottom: 8px; font-weight: 500; }
#scp-primary .scp-aff-stat-value { font-size: 22px; font-weight: 700; color: #2c3e50; margin-bottom: 0; }
#scp-primary .scp-aff-stat-change { font-size: 12px; color: #000000; font-weight: 500; }
#scp-primary .scp-aff-card { background: var(--scp-aff-surface, #ffffff); border-radius: var(--scp-aff-radius-lg, 12px); padding: 22px; border: 1px solid var(--scp-aff-line, #e3e9e8); margin-bottom: 16px; box-shadow: 0 1px 2px rgba(16,32,31,.04); }
#scp-primary .scp-aff-main-content .scp-aff-content-section.active .scp-aff-card:last-child { margin-bottom: 0; }
#scp-primary .scp-aff-card-header { display: flex ; justify-content: space-between; align-items: baseline; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--scp-aff-line, #e3e9e8); }
#scp-primary .scp-aff-card-title { font-size: 17px; font-weight: 700; color: #000000; letter-spacing: -.014em; line-height: 1.25; }
#scp-primary .scp-aff-table { width: 100%; border-collapse: collapse; margin-top: 15px; border: 1px solid var(--scp-aff-line, #e3e9e8); }
#scp-primary .scp-aff-table th { background: var(--scp-aff-sunken, #f4f8f7); padding: 11px 15px; text-align: left; font-weight: 700; color: #000000; border-bottom: 1px solid var(--scp-aff-line, #e3e9e8); font-size: 13px; }
#scp-primary .scp-aff-table td { padding: 13px 15px; border-bottom: 1px solid var(--scp-aff-line-soft, #eef3f2); color: #3d4f4e; font-size: 13.5px; font-variant-numeric: tabular-nums; }
#scp-primary .scp-aff-table tr:hover { background: #f8f9fa; }
#scp-primary td.scp-empty-box-td { text-align: center; padding: 34px 20px; border-radius: var(--scp-aff-radius-lg, 12px); background: var(--scp-aff-empty-box-bg, #fafcfb); box-shadow: none; color: var(--scp-aff-empty-box-text, #707070); font-size: 13.5px; }
#scp-primary .scp-aff-btn { font-size: 13px; padding: 10px 18px; border: none; border-radius: var(--scp-aff-radius, 8px); cursor: pointer; font-weight: 600; transition: filter .15s ease; text-decoration: none; display: inline-block; text-align: center; }
#scp-primary .scp-aff-btn-primary { border: 1px solid var(--scp-aff-primary-bg, #00ccc8); background: var(--scp-aff-primary-bg, #00ccc8); color: var(--scp-aff-primary-text-color, #ffffff); }
#scp-primary .scp-aff-btn-primary:hover { transform: none; filter: brightness(.94); }
/* The Generate Link button. Its own colour fields win, and fall back to the
primary accent when they are left unset, which is what it used to follow
outright. The Save button in Settings carries the same class and keeps the
primary accent through the more specific rule further down. */
#scp-primary .scp-aff-btn-success { background: var(--scp-aff-btn-generate-bg, var(--scp-aff-primary-bg, #00ccc8)); color: var(--scp-aff-btn-generate-text, var(--scp-aff-primary-text-color, #ffffff)); }
#scp-primary .scp-aff-btn-success:hover { transform: translateY(-2px); }
#scp-primary .scp-aff-btn-outline { background: transparent; border: 2px solid var(--scp-aff-primary-bg, #00ccc8);; color: var(--scp-aff-primary-bg, #00ccc8); }
#scp-primary .scp-aff-btn-outline:hover { background: var(--scp-aff-primary-bg, #00ccc8);; color: var(--scp-aff-primary-text-color, #ffffff); }
#scp-primary .scp-aff-input-group { margin-bottom: 20px; }
#scp-primary .scp-aff-label { display: block; margin-bottom: 8px; font-weight: 500; color: #495057; }
#scp-primary .scp-aff-input { width: 100%; padding: 12px 15px; border: 2px solid #e9ecef; border-radius: 8px; font-size: 14px; transition: all 0.3s ease; }
#scp-primary .scp-aff-input:focus { outline: none; border-color: #00ccc8; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); }
#scp-primary .scp-aff-input-wrap,
#scp-primary .scp-aff-link-box { background: var(--scp-aff-surface, #ffffff); border: 1px solid var(--scp-aff-line-strong, #d3dedd); border-radius: 10px; padding: 8px 8px 8px 14px; margin: 0; display: flex; align-items: center; gap: 10px; }
#scp-primary .scp-aff-link-text { font-size: 14px; color: #495057; word-break: break-all; margin-bottom: 0; line-height: 1 !important;}
#scp-primary .scp-aff-copy-btn { position: static; background: var(--scp-aff-btn-copy-bg, #00ccc8); color: var(--scp-aff-btn-copy-text, #ffffff); border: none; padding: 9px 12px; border-radius: var(--scp-aff-radius, 8px); cursor: pointer; font-size: 12px; font-weight: 600; line-height: 1; transform: none; flex: 0 0 auto; }
/* The column this sits in is already capped, so the field follows it rather
than stopping short at a width of its own inside a wider box. */
input#scp-aff-paypal-email { max-width: 100%; }
#scp-aff-your-earning-table th:first-child { width: auto; }
#scp-aff-your-earning-table th { text-align: left; width: 170px; }
body #scp-primary .scp-aff-table .scp-aff-link-text { max-width: 370px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#scp-primary .scp-aff-copy-btn svg { width: 18px; height: 18px; }
#scp-primary .scp-aff-copy-btn { padding: 6px 10px; }
#scp-primary .scp-default-leftside-layout .scp-aff-main-content { background-color: #fff; }
#scp-primary .scp-my-affiliate-link.scp-show-my-link { display: block;}
#scp-primary .scp-aff-badge { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-transform: none; }
body #scp-primary .scp-banner-content-area { padding: 15px; border-top: 1px solid #dcdcdc; margin-top: 0; display: flex ; justify-content: space-between; width: 100%; max-width: 100%; flex: 1; }
body #scp-primary .scp-banner-button-container { display: flex ; gap: 7px; justify-content: space-between; }
body #scp-primary .scp-banner-button-container .scp-aff-btn { display: flex; gap: 4px; align-items: center; padding: 8px 16px; font-size: 14px; flex: 1; justify-content: center; border-radius: 5px; }
#scp-primary .scp-aff-banner-grid { display: flex; gap: 20px; flex-direction: row; flex-wrap: wrap; margin-top: 20px;}
#scp-primary .scp-aff-card-header.scp-with-sub-descption-affiliate { display: flex ; align-items: flex-start; flex-direction: column;}
#scp-primary .scp-aff-badge-success { background: var(--scp-aff-status-confirm-bg, #d4edda); color: var(--scp-aff-status-confirm-text, #155724); }
#scp-primary .scp-aff-badge-warning { background: var(--scp-aff-status-pending-bg, #fff3cd); color: var(--scp-aff-status-pending-text, #856404); }
#scp-primary .scp-aff-badge-info { background: #fdeae2; color: #c7492f; }
#scp-primary .scp-aff-banner-item { border: 2px solid #e9ecef; border-radius: 8px; padding: 0; text-align: center; transition: all 0.3s ease; width: calc(33.33% - 15px); display: flex ; flex-direction: column; justify-content: space-between; min-width: 250px; }
#scp-primary .scp-aff-banner-item:hover { border-color: var(--scp-aff-primary-bg, #00ccc8); }
#scp-primary .scp-aff-banner-preview { width: 100%; background: #ffffff; border-radius: 6px; margin-bottom: 0; display: flex ; align-items: center; justify-content: center; color: #733030; font-weight: 600; height: 255px; padding: 10px; }
#scp-primary .scp-aff-table tbody { background: #fff; }
body #scp-primary .scp-banner-info-section h3 {font-size: 14px; margin-bottom: 5px; line-height: 1.3; font-weight: 600;}
body #scp-primary .scp-banner-info-section p { font-size: 13px; margin: 0; padding: 0; line-height: 1.3; }
body #scp-primary .scp-banner-info-section { margin-bottom: 15px; }
body #scp-primary .scp-aff-banner-preview h4 { font-size: 16px; color: #000; margin: 0; padding: 0; line-height: 1.3; }
body #scp-primary .scp-aff-table td .scp-aff-link-box-text-wpr { flex: 1; }
body #scp-primary .scp-aff-table td .scp-aff-link-text { width: 100%; min-width: 100%;}
body #scp-primary .scp-aff-table td .scp-aff-link-box { width: 100%; }
#scp-primary label.scp-aff-label,
body #scp-primary .scp-aff-card-inner-header h4 { font-size: 15px; color: #2c3e50; font-weight: 600; display: block; margin: 0 0 7px 0; }
#scp-primary #scp-aff-our-commision .scp-aff-table tr:hover { background: unset; }
#scp-primary #scp-aff-our-commision .scp-aff-table td { border-bottom: none!important; padding-bottom: 0!important; }
#scp-primary #scp-aff-our-commision .scp-aff-table td.scp-col-wrapp-new-line { border-bottom: 1px solid #d1bfbf !important; padding-bottom: 15px !important; }
body #scp-primary .scp-empty-box-div { padding: 34px 20px; border-radius: var(--scp-aff-radius-lg, 12px); background: var(--scp-aff-empty-box-bg, #fafcfb); border: 1px dashed var(--scp-aff-empty-box-text-border-color, #d3dedd); box-shadow: none; color: var(--scp-aff-empty-box-text, #707070); font-size: 13.5px; text-align: center; }
/*#scp-primary .scp-aff-commission-card { background: white; border-radius: 12px; padding: 20px; margin-bottom: 15px; border-left: 4px solid #00ccc8; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
#scp-primary .scp-aff-commission-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
#scp-primary .scp-aff-course-name { font-weight: 600; color: #2c3e50; font-size: 16px; }
#scp-primary .scp-aff-commission-rate { background: #e8f5e8; color: #27ae60; padding: 6px 12px; border-radius: 20px; font-weight: 600; font-size: 14px; }
#scp-primary .scp-aff-commission-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 15px; }
#scp-primary .scp-aff-detail-item { text-align: center; }
#scp-primary .scp-aff-detail-label { font-size: 12px; color: #808080; margin-bottom: 5px; }
#scp-primary .scp-aff-detail-value { font-size: 16px; font-weight: 600; color: #2c3e50; } */
#scp-primary .scp-aff-mobile-menu-btn { display: none; position: fixed; top: 20px; left: 20px; z-index: 1000; background: #00ccc8; color: white; border: none; padding: 10px; border-radius: 6px; cursor: pointer; }
#scp-primary .scp-aff-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; }
#scp-primary .scp-aff-pagination a {text-decoration: none;background: #f6f6f6;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 4px; color: #000; font-size: 15px;}
#scp-primary .scp-aff-pagination a.scp-aff-page-link.aff-active-link { background: #000; color: #fff; }
#scp-primary .scp-aff-card-inner-header h4 { font-size: 16px; font-weight: 600; }
#scp-primary .scp-aff-msg-main { display: none; background: #e7e7e7; padding: 10px; color: #000000; border-radius: 0 5px 5px 0; line-height: 1; max-width: 100%; width: max-content; font-size: 14px; font-weight: 600; }
#scp-primary .scp-aff-msg-main.scp-success-msg { display: block; background: #dcffdc; color: #007b00; border-left: 4px solid; margin-top: 10px; }
#scp-primary .scp-aff-msg-main.scp-error-msg { display: block; background: #ffe8e6; color: #ff3434; border-left: 5px solid; }
#scp-primary .scp-aff-box.scp-my-affiliate-link { margin-top: 30px; }
#scp-primary .scp-aff-banner-preview img { max-width: 100%; height: auto; max-height: 100%; width: auto; }
body #scp-primary .scp-aff-link-box-dynamic { display: none; }
body #scp-primary .scp-show-my-link .scp-aff-link-box-dynamic { display: flex; }
#scp-primary .scp-aff-copy-btn { position: unset; top: unset; left: unset; transform: unset; }
#scp-primary .scp-aff-link-box { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; width: max-content; padding: 8px 8px; border-radius: 5px; }
#scp-primary .scp-aff-title-with-link { display: flex; justify-content: space-between; flex-direction: row; width: 100%; gap: 20px; align-items: flex-start; }
#scp-primary .scp-aff-title-with-link .scp-aff-title-with-link-title{flex: 1;}
#scp-primary .scp-aff-status-legend-wrapper { position: relative; display: inline-block; }
#scp-primary .scp-aff-status-legend-trigger { cursor: pointer; text-decoration: none; font-weight: 600;border-bottom: 1px solid; line-height: 1.3; font-size: 14px; }
#scp-primary .scp-aff-status-legend-tooltip { display: none; position: absolute; top: 120%; right: 0; z-index: 10; width: 300px; padding: 12px; background-color: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
#scp-primary .scp-aff-status-legend-wrapper:hover .scp-aff-status-legend-tooltip { display: block; }
#scp-primary .scp-aff-status-legend-item { padding: 10px; margin-bottom: 8px; border-radius: 4px; font-size: 14px; line-height: 1.4; }
#scp-primary .scp-aff-status-legend-item.pending { background-color: var(--scp-aff-status-pending-bg, #fff3cd); }
#scp-primary .scp-aff-status-legend-item.approved { background-color: var(--scp-aff-status-confirm-bg, #d4edda); }
#scp-primary .scp-aff-status-legend-item.rejected { background-color: #fdeae2; }
#scp-primary .scp-aff-status-legend-item strong { display: inline-block; margin-right: 5px; }
#scp-primary .scp-aff-commision-main { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
#scp-primary .scp-aff-commission-card { background: #fcfcfc; position: relative; transition: background-color 0.2s ease; padding: 15px; border: 1px solid gainsboro; margin-bottom: 20px; }
#scp-primary .scp-aff-commission-card:last-child { margin-bottom: 0; }
#scp-primary .scp-aff-commission-card:hover { background: #fefefe; }
#scp-primary .scp-aff-commission-header { display: flex ; justify-content: flex-start; align-items: flex-start; margin-bottom: 15px; gap: 20px; }
#scp-primary .scp-aff-course-name { font-weight: 600; color: #0f172a; font-size: 16px; }
#scp-primary .scp-aff-commission-rate { background: var(--scp-aff-commission-label-bg, #0f172a); color: var(--scp-aff-commission-label-text, #ffffff); padding: 4px 12px; border-radius: 6px; font-weight: 500; font-size: 13px; letter-spacing: 0.025em; }
#scp-primary .scp-aff-commission-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
#scp-primary .scp-aff-detail-item { position: relative; }
#scp-primary .scp-aff-detail-label { font-size: 12px; color: #64748b; margin-bottom: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
#scp-primary .scp-aff-detail-value { font-size: 20px; font-weight: 700; color: #0f172a; font-feature-settings: 'tnum'; }
#scp-primary .scp-aff-detail-item:nth-child(2) .scp-aff-detail-value { color: var(--scp-aff-primary-bg, #00ccc8); }
#scp-primary .scp-aff-detail-item:nth-child(4) .scp-aff-detail-value { color: var(--scp-aff-primary-bg, #00ccc8); }
#scp-primary .commission-progress { width: 100%; height: 3px; background: #e2e8f0; border-radius: 2px; margin-top: 8px; overflow: hidden; }
#scp-primary .commission-progress-fill { height: 100%; background: var(--scp-aff-primary-bg, #00ccc8); border-radius: 2px; transition: width 0.8s ease; }
#scp-primary .commission-30 { width: 30%; }
#scp-primary .commission-35 { width: 35%; }
#scp-primary .scp-aff-commision-with-link .scp-aff-link-section { flex: 1; }
#scp-primary .scp-aff-commision-with-link .scp-aff-link-section .scp-aff-link-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: unset; }
#scp-primary .scp-aff-commision-with-link .scp-aff-link-section {max-width: 54%;}
#scp-primary .scp-aff-commision-with-link .scp-aff-commision-inner-row { display: flex; gap: 20px; align-items: center; }
#scp-primary .scp-aff-commision-with-link .scp-aff-commission-header { display: flex ; align-items: flex-start; flex-direction: column; gap: 10px; }
#scp-primary .scp-aff-commision-with-link .scp-aff-link-box { padding: 0 0 0 10px; height: 32px; display: flex; align-items: center; border: 2px solid gainsboro; border-radius: 5px; background: #ffffff; }
#scp-primary .scp-aff-commision-with-link .scp-aff-copy-btn { right: -2px; border-radius: 0 5px 5px 0; padding: 10px 12px; }
#scp-primary .scp-aff-commision-with-link .scp-aff-commission-header { border-bottom: 1px solid gainsboro; padding-bottom: 10px; margin-bottom: 20px; }
#scp-primary .scp-aff-date-range-main-wrapper { position: relative; display: inline-block; width: 240px; }
#scp-primary .scp-aff-date-range-main-wrapper .scp-aff-date-range-picker { text-align: left; width: 100%; padding: 12px 45px 12px 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 14px; background-color: white; transition: border-color 0.3s ease; box-sizing: border-box; }
.scp-aff-col-row-multi { display: flex; gap: 10px; }
.scp-aff-col-row-multi select#scp-aff-earning-filter { text-align: left; width: 100%; padding: 12px 35px 12px 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 14px; background-color: white; transition: border-color 0.3s ease; box-sizing: border-box; font-weight: 600; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; line-height: 1.5; }
#scp-primary .scp-aff-policy-buttons a.scp-open-modal { display: block; font-size: 15px; border-bottom: 1px solid; font-weight: 600; }
#scp-primary .scp-aff-policy-buttons { display: flex; gap: 10px; margin-bottom: 10px; justify-content: flex-end; }
#scp-primary .scp-aff-date-range-main-wrapper svg { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; color: #666; cursor: pointer; }
.scp-aff-date-range-main-wrapper:hover .scp-aff-date-range-picker { border-color: #bbb; cursor: pointer; }
body #scp-primary .scp-dashboard-wrapper-white-box main.scp-aff-main-content {
background: transparent;
}
#scp-primary .scp-my-account-start.scp-aff-activated:not(.scp-dont-move-aff-to-left) .scp-container { width: calc(var(--scp-myaccount-container-width, 1200px) + var(--scp-aff-menu-sidebar-width, 250px)); }
#scp-primary .scp-aff-setting-section { margin-bottom: 20px; border-bottom: 1px solid gainsboro; padding-bottom: 20px; }
#scp-primary .scp-aff-setting-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
#scp-primary .scp-aff-setting-section-title { font-size: 16px; font-weight: 600; color: #374151; margin: 0 0 20px 0; display: none; align-items: center; gap: 10px; }
#scp-primary .scp-aff-setting-section-icon { color: #6b7280; font-size: 16px; }
#scp-primary .scp-aff-setting-fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
#scp-primary .scp-aff-setting-input-group { display: flex; flex-direction: column; }
#scp-primary .scp-aff-setting-label { font-weight: 600; color: #374151; margin-bottom: 8px; font-size: 14px; }
#scp-primary .scp-aff-setting-input-wrapper { position: relative; width: 100%; }
#scp-primary .scp-aff-setting-checkbox-group { display: flex; flex-direction: column; gap: 16px; }
#scp-primary .scp-aff-setting-checkbox-item { display: flex; align-items: flex-start; padding: 0; cursor: pointer; gap: 12px; }
#scp-primary .scp-aff-setting-checkbox-input { margin: 0; width: 16px; height: 16px; margin-top: 2px; cursor: pointer; accent-color: #374151; }
#scp-primary .scp-aff-setting-checkbox-label { font-size: 14px; color: #374151; cursor: pointer; flex: 1; line-height: 1.3; font-weight: 600; }
#scp-primary .scp-aff-setting-helper-text { font-size: 13px; color: #6b7280; margin-top: 0; font-weight: 400; }
body #scp-primary .scp-aff-setting-input-group .scp-aff-setting-helper-text { margin-top: 5px; font-weight: 400; }
body #scp-primary .sc-aff-hr { margin-top: 20px; margin-bottom: 20px; border-bottom: 1px solid gainsboro; }
body #scp-primary .scp-default-leftside-layout { padding: 40px; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container { display: flex; flex-direction: column; overflow: hidden; }
/*#scp-primary .scp-dashboard-wrapper .scp-aff-container nav.scp-aff-sidebar { width: 100%; display: flex ; flex-direction: row; flex-wrap: wrap; background: transparent; color: #000; padding: 0; justify-content: flex-start; gap: 0; border-bottom: 2px solid gainsboro; margin-bottom: 20px; margin-left: -10px; margin-right: -10px; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container a.scp-aff-nav-item { color: #000000; padding: 0; background: transparent; border: none; font-weight: 500; display: flex ; font-size: 14px; gap: 6px; position: relative; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; }*/
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar { width: 100%; display: flex ; flex-direction: row; flex-wrap: wrap; background: var(--scp-aff-menu-bg, #2c3e50); color: var(--scp-aff-menu-text, #ecf0f1); padding: 0; justify-content: flex-start; gap: 0; border-bottom: 2px solid gainsboro; margin-bottom: 0; border-radius: 7px 7px 0 0; overflow: hidden; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container a.scp-aff-nav-item { color: var(--scp-aff-menu-text, #ecf0f1); padding: 0; background: transparent; border: none; font-weight: 500; display: flex ; font-size: 14px; gap: 6px; position: relative; padding: 18px 18px 18px; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container a.scp-aff-nav-item.active { background: var(--scp-aff-menu-active-bg, #3c5671); color: var(--scp-aff-menu-active-text, #ffffff); }
#scp-primary .scp-aff-setting-helper-text { font-weight: 400; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container a.scp-aff-nav-item .fas { display: block; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container a.scp-aff-nav-item.active:after { border-bottom: 2px solid #000000; content: ''; display: block; position: absolute; bottom: -1px; width: 100%; left: 0; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-main-content { background: #ffffff; border-radius: 0; padding: 40px 40px; }
#scp-primary .scp-aff-page-header.scp-row-flex { display: flex; justify-content: space-between; gap: 15px; }
#scp-primary .scp-aff-date-range-picker { padding: 10px; border: 1px solid gainsboro; background: #f9f9f9; border-radius: 5px; font-weight: 600; text-align: center; font-size: 13px; }
#scp-primary .scp-aff-page-title { font-size: 17px; margin-bottom: 0; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container .scp-aff-main-content{ border: 1px solid gainsboro; border-top: 0; }
#scp-primary .scp-aff-pagination:empty { display: none; }
#scp-primary .scp-main-content-area.scp-my-account-start.scp-aff-activated:not(.scp-dont-move-aff-to-left) .scp-my-account-sidebar { margin-left: calc(var(--scp-aff-menu-sidebar-width, 250px) + 30px); width: calc(100% - var(--scp-aff-menu-sidebar-width, 250px) - 30px); }
#scp-primary .scp-main-content-area.scp-my-account-start.scp-aff-activated:not(.scp-dont-move-aff-to-left) .scp-aff-container { max-width: 100%; }
/* Same for the affiliate tab whatever the menu placement: inside My Account the
tab body sets the width, so the 1050px cap at the top of this file just
narrowed the panel. The standalone affiliate page keeps its cap. */
#scp-primary .scp-my-account-start .scp-aff-container { max-width: 100%; }
#scp-primary .scp-aff-setting-section.scp-description:not(.scp-shortcode-elements) > *:first-child { margin-top: 0!important; }
#scp-primary .scp-aff-nav-item svg { width: 22px; height: 22px; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container .scp-aff-nav-item svg { width: 18px; height: 18px; }
#scp-primary .scp-aff-msg-container { max-width: 900px; margin: 40px auto; padding: 0 20px; display: block; align-items: center; }
/* The affiliate dashboard reserves a full viewport (min-height: calc(100vh -
114px) at the top of this file) so it fills the screen when it IS the page.
Nested inside the My Account tab it is not the page: the account tabs and the
community shell sit above it, so that viewport is added on top of them and
leaves a screenful of blank space under short tabs like Welcome. The
.scp-dashboard-wrapper rule below never covered the account tab, whose
wrapper is the separate .scp-dashboard-wrapper-white-box class. */
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container,
#scp-primary .scp-dashboard-wrapper-white-box .scp-aff-container { min-height: unset; }
#scp-primary .scp-aff-msg-success { text-align: center; background: var(--sucess-box-bg-color,#e8f5e8); border: 2px solid var(--sucess-box-bg-border-color,#4caf50); border-radius: 12px; padding: 26px; box-shadow: 0 4px 16px rgba(76, 175, 80, 0.15); position: relative; overflow: hidden; }
#scp-primary .scp-aff-msg-icon { display: flex; width: 48px; height: 48px; background: var(--sucess-box-bg-border-color,#4caf50); border-radius: 5px; position: relative; margin-bottom: 20px; animation: scp-aff-msg-pulse 2s ease-in-out infinite; margin-left: auto; margin-right: auto; align-items: center; justify-content: center; }
#scp-primary .scp-aff-msg-success h1,
#scp-primary .scp-aff-msg-success h2,
#scp-primary .scp-aff-msg-success h3,
#scp-primary .scp-aff-msg-success h4,
#scp-primary .scp-aff-msg-success h5,
#scp-primary .scp-aff-msg-success h6 { color: #2e7d32; font-size: 22px; font-weight: 600; margin: 0 0 5px 0; line-height: 1.3; text-align: center; }
#scp-primary .scp-aff-msg-success h1 { font-size: 30px; }
#scp-primary .scp-aff-msg-success h2 { font-size: 29px; }
#scp-primary .scp-aff-msg-success h4 { font-size: 26px; }
#scp-primary .scp-aff-msg-success h5{ font-size: 22px; }
#scp-primary .scp-aff-msg-success h6 { font-size: 20px; }
#scp-primary .scp-aff-msg-success p { color: #4a5568; font-size: 16px; line-height: 1.6; margin: 0 0 16px 0; text-align: center; }
#scp-primary .scp-aff-msg-success h3,
#scp-primary .scp-aff-msg-success p { color: var(--sucess-box-text-color, #333333); }
#scp-primary .scp-aff-page-header.scp-mt-40 { margin-top: 40px; }
#scp-primary .scp-aff-page-header.scp-mb-10 { margin-bottom: 10px;}
#scp-primary .scp-aff-msg-text:last-child { margin-bottom: 0; }
#scp-primary .scp-aff-msg-success p:last-child { margin-bottom: 0; }
#scp-primary .scp-aff-msg-icon svg { color: #fff; width: 30px; height: 30px; }
#scp-primary .scp-aff-btn-msg { margin-top: 20px; text-align: center; }
#scp-primary .scp-aff-btn-msg button.scp-request-approval-btn.scp-btn { width: 100%; max-width: 450px; margin-left: auto; margin-right: auto; }
#scp-primary .scp-aff-msg-success.scp-aff-msg-rejected { background: var(--scp-aff-empty-box-bg, #fff8f8); border-color: var(--scp-aff-empty-box-text-border-color, #e05b5b); }
#scp-primary .scp-aff-msg-success.scp-aff-msg-rejected .scp-aff-msg-icon {background: var(--scp-aff-empty-box-text, #333333);}
#scp-primary .scp-aff-msg-success.scp-aff-msg-rejected h3,
#scp-primary .scp-aff-msg-success.scp-aff-msg-rejected p { color: var(--scp-aff-empty-box-text, #333333); }
body #scp-primary .scp-aff-input-wrap { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--scp-aff-line-strong, #d3dedd); border-radius: 10px; overflow: hidden; max-width: 100%; background: #fff; padding: 0; width: max-content; }
body #scp-primary .scp-aff-input-wrap .scp-aff-link-text { padding: 4px 12px; background: #f8f9fa; border-right: 1px solid #ddd; font-size: 14px; color: #666; white-space: nowrap; display: flex; align-items: center; }
body #scp-primary .scp-aff-input-wrap input#scp-aff-id-input { flex: 1; padding: 10px 14px; border: none; outline: none; font-size: 13.5px; min-width: 240px; max-width: 340px; }
body #scp-primary .scp-aff-input-wrap .scp-aff-save-btn { padding: 10px 18px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; background: var(--scp-aff-primary-bg, #00ccc8); color: var(--scp-aff-primary-text-color, #ffffff); min-width: unset; border-radius: 0; letter-spacing: 0; }
body #scp-primary .scp-aff-input-wrap .scp-aff-save-btn:hover { background: var(--scp-aff-primary-bg, #00ccc8); filter: brightness(.94); }
body #scp-primary .scp-aff-input-wrap .scp-aff-save-btn:hover { box-shadow: none; transform: unset; }
#scp-primary .scp-aff-table .scp-tbl-center { text-align: center!important; }
#scp-primary .scp-aff-sub-tab a.scp-sub-tab-link { background: #e8e8e8; padding: 10px; display: block; color: #000; font-size: 14px; min-width: 150px; text-align: center; }
#scp-primary .scp-aff-sub-tab { display: flex; border-radius: 5px; overflow: hidden; }
#scp-primary .scp-aff-sub-tab a.scp-sub-tab-link.scp-active { background: var(--scp-aff-primary-bg, #00ccc8); color: var(--scp-aff-primary-text-color, #fff); }
body #scp-primary .scp-aff-sub-tab-content-wrapper { display: none; }
body #scp-primary .scp-aff-sub-tab-content-wrapper.scp-active { display: block; }
#scp-primary .scp-aff-filter-tabs { display: flex; gap: 8px; margin-bottom: 10px; justify-content: flex-end; }
#scp-primary .scp-aff-tab-button { padding: 8px 16px; border: none; border-radius: 6px; background-color: var(--scp-aff-leaderboard-filter-bg, #cfcfcf);color: var(--scp-aff-leaderboard-filter-text, #000000);cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s ease; }
#scp-primary .scp-aff-tab-button.active,
#scp-primary .scp-aff-tab-button:hover { background-color: var(--scp-aff-leaderboard-filter-active-bg, #495057); color: var(--scp-aff-leaderboard-filter-active-text, #ffffff); }
#scp-primary .scp-aff-filter-options { display: flex; gap: 8px; margin-bottom: 20px; }
#scp-primary .scp-aff-filter-btn { padding: 8px 16px; border: none; border-radius: 6px; background-color: #e9ecef; color: #6c757d; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s ease; }
#scp-primary .scp-aff-filter-btn.active,
#scp-primary .scp-aff-filter-btn:hover { background-color: #007bff; color: white; }
#scp-primary .scp-aff-search-container { margin-bottom: 20px; }
#scp-primary .scp-aff-search-input { width: 100%; max-width: 300px; padding: 12px 16px; border: 1px solid #dee2e6; border-radius: 8px; font-size: 14px; background-color: white; transition: border-color 0.2s ease; }
#scp-primary .scp-aff-search-input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); }
#scp-primary .scp-aff-table-wrapper { background-color: white; border-radius: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
#scp-primary .scp-aff-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 0; }
#scp-primary .scp-aff-table-header th { background-color: #f8f9fa; padding: 16px 20px; text-align: left; font-weight: 600; color: #495057; border-bottom: 2px solid #dee2e6; }
#scp-primary .scp-aff-container-leader-board .scp-aff-table-header th { background: var(--scp-aff-leaderboard-header-bg, #f8f9fa);color: var(--scp-aff-leaderboard-header-text, #495057);}
#scp-primary .scp-aff-table-row { transition: background-color 0.2s ease; }
#scp-primary .scp-aff-table-row:hover { background-color: #f8f9fa; }
#scp-primary .scp-aff-rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 600; font-size: 14px; background-color: #e9ecef; color: #495057; position: relative; z-index: 1; }
#scp-primary .scp-aff-rank-badge.scp-aff-rank-1 { background-color: #ffd700; color: #000000; margin-top: -10px; }
#scp-primary .scp-aff-rank-badge.scp-aff-rank-2 { background-color: #c0c0c0; color: white; margin-top: -10px; }
#scp-primary .scp-aff-rank-badge.scp-aff-rank-3 { background-color: #cd7f32; color: white; margin-top: -10px; }
#scp-primary .scp-aff-user-info { display: flex; align-items: center; gap: 12px; }
#scp-primary .scp-aff-avatar { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; }
#scp-primary .scp-aff-username { font-weight: 500; color: inherit; }
#scp-primary .scp-aff-table .scp-aff-sales { color: inherit; font-weight: 600; text-align: center; }
#scp-primary .scp-aff-earnings { font-weight: 600; }
#scp-primary .scp-aff-table-row.scp-aff-hidden { display: none; }
#scp-primary span.scp-aff-rank-badge.scp-aff-rank-1:after,
span.scp-aff-rank-badge.scp-aff-rank-2:after,
span.scp-aff-rank-badge.scp-aff-rank-3:after { position: absolute; width: 20px; height: 28px; background-color: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); border-radius: 2px; content: ""; z-index: -4; top: 15px; }
#scp-primary .scp-aff-container-leader-board { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px; }
#scp-primary .scp-aff-table-header th.scp-aff-earnings-col,
#scp-primary .scp-aff-table-header .scp-aff-sales-col { text-align: center; }
#scp-primary .scp-aff-table td.scp-aff-earnings { text-align: center; }
#scp-primary .scp-aff-container-leader-board .scp-aff-table tr{ background: var(--scp-aff-leaderboard-body-bg, #ffffff); }
#scp-primary .scp-aff-container-leader-board .scp-aff-table td{ color: var(--scp-aff-leaderboard-body-text, #495057); }
#scp-primary .scp-aff-container-leader-board .scp-aff-table tr:hover{ background: var(--scp-aff-leaderboard-hover-bg, #f8f9fa); }
#scp-primary .scp-aff-container-leader-board .scp-aff-table tr:hover td{ color: var(--scp-aff-leaderboard-hover-text, #495057); }
#scp-primary #scp-aff-main-table td.scp-aff-rank { padding-top: 18px; padding-bottom: 18px; zoom: 0.8; }
#scp-primary #scp-aff-main-table td { padding: 12px 20px; }
body #scp-primary .scp-v2-loader-container { display: flex; justify-content: center; align-items: center; height: 100px; border-radius: 8px; margin: 20px; }
#scp-primary .scp-v2-loader-spinner { width: 50px; height: 50px; border: 4px solid #e3e3e3; border-top: 4px solid #3498db; border-radius: 50%; animation: scp-v2-loader-spin 1s linear infinite; }
#scp-primary .scp-aff-table td.scp-empty-box-td-loader { background: #fff; }
body #scp-primary h2.scp-aff-title-main { font-size: 17px; margin-bottom: 0; margin-top: 0; margin-left: 0px; width: var(--scp-aff-menu-sidebar-width, 250px); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fefefe; padding: 12px 10px; border: 1px solid gainsboro; border-bottom: 0; border-radius: 5px 5px 0 0; font-weight: bold; }
body #scp-primary .scp-dashboard-metric.scp-card { margin-bottom: 0; background: var(--scp-aff-surface, #ffffff); border-radius: var(--scp-aff-radius-lg, 12px); padding: 18px 20px; border: 1px solid var(--scp-aff-line, #e3e9e8); position: relative; overflow: hidden; transition: border-color .15s ease; width: calc(25% - 6px); display: flex; flex-direction: column; justify-content: space-between; gap: 14px; box-shadow: 0 1px 2px rgba(16,32,31,.04); }
body #scp-primary .scp-dashboard-metric.scp-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 204, 200, 0.1), transparent); transition: left 0.5s; }
body #scp-primary .scp-dashboard-metric.scp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }
body #scp-primary .scp-dashboard-metric.scp-card:hover::before { left: 100%; }
body #scp-primary .scp-info-card { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
body #scp-primary .scp-info-card h3 { font-size: 15px; font-weight: 700; color: #000000; margin: 0; text-transform: none; letter-spacing: -.01em; line-height: 1.3; }
body #scp-primary .scp-info-card-icon-wrapper { display: flex ; justify-content: space-between; align-items: center; }
body #scp-primary .scp-dashboard-value { font-size: 30px; font-weight: 700; color: #000000; margin: 0; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
body #scp-primary .scp-info-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f0fdfc, #e6fffa); }
body #scp-primary .scp-info-card-icon { width: 36px; height: 36px; border-radius: 5px; }
#scp-primary .scp-aff-mobile-menu-btn { display: none; }
#scp-primary .scp-aff-table .scp-aff-link-text { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3!important; }
#scp-primary .scp-aff-table td { vertical-align: middle; }
#scp-primary .scp-aff-table td.scp-aff-product-name { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#scp-primary .scp-aff-table th.scp-aff-product-name { width: 300px; }
.daterangepicker .calendar-table table td,
.daterangepicker .calendar-table table th { border: none; line-height: unset; padding: 7px; vertical-align: unset }
body #scp-primary .scp-aff-box.scp-my-affiliate-link { display: none; }
body #scp-primary .scp-aff-box.scp-my-affiliate-link.scp-show-my-link { display: block; }
body #scp-primary .scp-aff-tier-2-commision { font-style: italic; font-size: 13px; }
body #scp-primary .scp-aff-rec-commision,
body #scp-primary .scp-aff-tier-1-commision { font-weight: 600; color: #000; }
body #scp-primary .scp-aff-tier-2-commision { text-align: center; font-style: normal; }
body #scp-primary .scp-aff-tier-2-commision strong { font-weight: 600; }
body #scp-primary .scp-aff-filter-dropdown { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; justify-content: flex-end; }
body #scp-primary .scp-aff-filter-dropdown label { font-size: 14px; font-weight: 500; color: #374151; margin: 0; white-space: nowrap; }
body #scp-primary #scp-aff-filter-select { position: relative; padding: 10px 35px 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; background-color: #ffffff; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; font-size: 14px; color: #374151; cursor: pointer; transition: all 0.2s ease; min-width: 140px; outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; max-width: max-content;}
body #scp-primary #scp-aff-filter-select:hover { border-color: #9ca3af; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
body #scp-primary #scp-aff-filter-select option { padding: 8px; background-color: #ffffff; color: #374151; }
#scp-primary .scp-aff-container-leader-board .scp-aff-table-header .scp-aff-sales-col { text-align: right; }
#scp-primary .scp-aff-container-leader-board .scp-aff-table td.scp-aff-earnings { text-align: right; }
#scp-primary #scp-aff-main-table td.scp-empty-box-td {box-shadow: none;}
#scp-primary thead.scp-aff-table-header { border: none; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container { border: none; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container a.scp-aff-nav-item { padding: 8px 14px 8px; border-bottom: 0; border-radius: 7px; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-sidebar::after { display: none; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container a.scp-aff-nav-item.active:after { display: none; }
body #scp-primary .scp-info-section { padding: 20px; border: 1px solid #ddd; border-radius: 0; background: #fdfdfd; }
body #scp-primary .scp-links { display: flex; gap: 12px; }
body #scp-primary .scp-link-button {color: var(--scp-link-text-color);font-weight: 600;border-bottom: 1px solid; text-decoration: none; font-size: 14px; }
body #scp-primary .scp-link-button:hover { text-decoration: none; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper { display: flex; flex: 1; gap: 10px; justify-content: flex-end; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper .date-input { padding: 14px 10px; line-height: 1; border: 2px solid #ddd; border-radius: 8px; font-size: 14px; background-color: white; transition: border-color 0.3s ease; box-sizing: border-box; font-weight: 600; max-width: 140px; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter .date-input-group .filter-label { font-size: 14px; margin-bottom: 5px }
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-col-row-multi { display: flex; align-items: flex-end; margin-top: -15px; width: 100%; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-filter-btn-box > a { display: flex; width: 48px; height: 48px; background: var(--scp-aff-primary-bg); color: var(--scp-aff-primary-text-color); align-items: center; justify-content: center; border-radius: 8px; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter { min-width: 550px; }
body #scp-primary .scp-aff-page-header .scp-aff-col-left { flex: 1; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-col-row-multi { width: 100%; justify-content: flex-end; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter .date-input-group { width: 140px; text-align: center; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper svg { position: unset; top: unset; left: unset; transform: unset; color: inherit; width: 38px; height: 25px; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-filter-btn-box { display: flex; flex-direction: column; justify-content: flex-end; margin-top: 0; }
body #scp-primary .hasDatepicker { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3e%3c/svg%3e"); background-position: right 12px center; background-repeat: no-repeat; background-size: 18px; padding-right: 40px; cursor: pointer; }
body #scp-primary .scp-aff-bb { border-bottom: 1px solid gainsboro; padding-bottom: 30px; margin-bottom: 20px; }
body #scp-primary .scp-table-wrapper.scp-auto-table-width { width: 100%; overflow-x: auto; }
body #scp-primary .scp-auto-table-width .scp-aff-table { width: auto; max-width: 100%; border-collapse: collapse; table-layout: auto; }
#scp-primary .scp-auto-table-width .scp-aff-table th { min-width: 150px; width: max-content; }
body #scp-primary .scp-setting-btn-wrapper { margin-top: 30px; margin-left: auto; text-align: center; }
html body .scp-ui-datepicker-main { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; border-radius: 10px; padding: 0; background-color: #ffffff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); width: auto; min-width: 240px; border: none!important; }
html body .scp-ui-datepicker-main .ui-datepicker-header { background: var(--scp-primary-bg-color); color: var(--scp-primary-text-color); padding: 10px; border-radius: 8px 8px 0 0; position: relative; text-align: center; font-weight: 600; }
html body .scp-ui-datepicker-main .ui-datepicker-title { font-size: 16px; }
html body .scp-ui-datepicker-main .ui-datepicker-prev,
html body .scp-ui-datepicker-main .ui-datepicker-next { position: absolute; top: 10px; width: 30px; height: 30px; background: #ffffff; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
html body .scp-ui-datepicker-main .ui-datepicker-prev { left: 10px; }
html body .scp-ui-datepicker-main .ui-datepicker-next { right: 10px; }
html body .scp-ui-datepicker-main table { width: 100%; margin-top: 8px; border-collapse: collapse; }
html body .scp-ui-datepicker-main th { text-align: center; color: #555; padding: 5px; font-weight: 600; font-size: 13px; }
html body .scp-ui-datepicker-main td { text-align: center; padding: 3px; line-height: 1; }
html body .scp-ui-datepicker-main td a { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 6px; color: #333; text-decoration: none; transition: 0.3s; font-size: 14px; font-weight: 600!important; background: #ffffff !important; border: none!important; padding: 4px; }
html body .scp-ui-datepicker-main td a:hover { background-color: var(--scp-secondary-bg-color)!important; color: var(--scp-secondary-text-color); }
html body .scp-ui-datepicker-main .ui-state-active { background-color: var(--scp-primary-bg-color) !important; color: var(--scp-primary-text-color) !important; font-weight: bold; }
html body .scp-ui-datepicker-main .ui-datepicker-other-month,
html body .scp-ui-datepicker-main .ui-datepicker-unselectable { opacity: 0.3; pointer-events: none; }
html body .scp-ui-datepicker-main .ui-datepicker-week-end a { color: #d32f2f; }
#scp-primary .scp-aff-msg-success.scp-pending-approval {
background: #f5f9ff;
border-color: #3b82f6;
}
#scp-primary .scp-aff-msg-success.scp-pending-approval .scp-aff-msg-icon {
background-color: #3b82f6;
}
#scp-primary .scp-aff-msg-success.scp-pending {
background: #fff3dd;
border-color: #f59e0b;
}
#scp-primary .scp-aff-msg-success.scp-pending .scp-aff-msg-icon {
background-color: #f59e0b;
}
#scp-primary .scp-aff-msg-success.scp-aff-msg-rejected.scp-reject {
background: #fff6f6;
border-color: #e05b5b;
}
#scp-primary .scp-aff-msg-success.scp-aff-msg-rejected.scp-reject .scp-aff-msg-icon {
background-color: #e05b5b;
}
#scp-primary .scp-profile-header-avatar { position: relative; z-index: 2; width: 140px; height: 140px; object-fit: cover; margin-bottom: 50px; margin-left: auto; margin-right: auto; margin-top: -20px; }
#scp-primary .scp-profile-header-avatar .scp-avatar-edit input { display: none; }
#scp-primary .scp-avatar-edit label { color: #000; position: absolute; left: 50%; top: 50%; background: rgb(255 255 255 / 80%); padding: 5px; width: 30px; height: 30px; display: none; align-items: center; justify-content: center; transform: translate(-50%, -50%); cursor: pointer; margin: 0; border-radius: 5px; }
#scp-primary .scp-avatar-edit label i { font-size: 13px; }
#scp-primary .scp-profile-header-avatar:hover label { display: flex; }
#scp-primary .scp-profile-header-avatar img { border: solid 2px #fff; box-shadow: none; display: block; margin: 0 auto; background-color: #ffffff; border: 3px solid #fff; max-width: 140px; height: 140px; object-fit: cover; border-radius: 120px; }
#scp-primary .scp-profile-header-avatar:hover .scp-avatar-edit:before { background: #00000057; content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 100%; }
#scp-primary .scp-promo-referal-title { font-size: 26px; margin-bottom: 10px; color: #222; }
#scp-primary .scp-promo-referal-description { font-size: 15px; color: #666; margin-bottom: 20px; }
#scp-primary .scp-promo-referal-subtitle { font-size: 16px; color: #444; margin: 0 0 10px; border-bottom: 1px solid #ddd; padding-bottom: 4px; font-weight: 600; }
#scp-primary .scp-promo-referal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; gap: 20px; }
#scp-primary .scp-promo-referal-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px!important; border: 1px solid #eee; border-radius: 6px; margin-bottom: 8px!important; background-color: #ffffff; transition: background-color 0.2s; width: calc(50% - 10px); }
#scp-primary .scp-promo-referal-icon { margin-right: 0; display: flex; align-items: center; flex-shrink: 0; }
#scp-primary .scp-promo-referal-svg { width: 20px; height: 20px; color: var(--scp-aff-primary-bg, #00ccc8); }
#scp-primary .scp-promo-referal-name { flex-grow: 1; font-size: 15px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 7px; }
#scp-primary .scp-promo-referal-action { font-size: 12px; padding: 6px 12px; border-radius: 4px; text-decoration: none; transition: background 0.2s; flex-shrink: 0; background: var(--scp-aff-primary-bg, #00ccc8); color: var(--scp-aff-primary-text-color, #ffffff); }
#scp-primary .scp-promo-referal-action:hover { background-color: #005e8a; }
#scp-primary .scp-promo-referal-section { margin-top: 30px; }
#scp-primary .scp-promo-referal-section:first-child { margin-top: 0; }
#scp-primary .scp-aff-accordion { border: none; border-radius: 0; overflow: hidden; }
#scp-primary .scp-aff-accordion-item { border: 1px solid #ddd; margin-bottom: 10px; overflow: hidden; }
#scp-primary .scp-aff-accordion-header { background: #f8f8f8; padding: 12px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
#scp-primary .scp-aff-accordion-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
#scp-primary .scp-aff-accordion-icon { font-weight: bold; font-size: 18px; transition: transform 0.3s; }
#scp-primary .scp-aff-accordion-item.active .scp-aff-accordion-icon { transform: rotate(45deg); }
#scp-primary .scp-aff-accordion-body { display: none; padding: 15px; background: #fff; }
#scp-primary .scp-aff-accordion-description { margin-bottom: 15px; font-size: 14px; color: #555; }
#scp-primary .scp-aff-accordion-banner-list { display: flex; flex-wrap: wrap; gap: 10px; }
@keyframes scp-v2-loader-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes scp-aff-msg-pulse {
0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; }
}
/*.table-view .scp-aff-commission-card { display: grid; grid-template-columns: 2fr 1fr 4fr; align-items: center; gap: 24px; padding: 20px 24px; }
.table-view .scp-aff-commission-header { margin: 0; padding: 0; border: none; flex-direction: column; align-items: flex-start; gap: 8px; }
.table-view .scp-aff-course-name { font-size: 16px; }
.table-view .scp-aff-commission-rate { font-size: 12px; padding: 2px 8px; }
.table-view .scp-aff-commission-details { display: flex; gap: 32px; }
.table-view .scp-aff-detail-item { text-align: center; min-width: 80px; }
.table-view .scp-aff-detail-value { font-size: 16px; }
@media (max-width: 768px) {
.table-view .scp-aff-commission-card { grid-template-columns: 1fr; gap: 16px; }
.table-view .scp-aff-commission-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
}*/
#scp-primary .scp-aff-responsive-main-wrapper{
container-type: inline-size;
container-name: my-container;
}
@container (max-width: 1400px) {
body #scp-primary .scp-aff-table td .scp-aff-link-box { width: 100%; }
#scp-primary .scp-main-content-area.scp-my-account-start.scp-aff-activated:not(.scp-dont-move-aff-to-left) .scp-my-account-sidebar{ margin-left: 0; width: 100%; max-width: 100%;}
}
@container (max-width: 1150px) {
#scp-primary .scp-aff-sidebar {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
background: var(--scp-aff-verical-menu-bg, #fff);
margin-bottom: 0;
border: 1px solid gainsboro;
border-radius: 5px 5px 0 0;
padding: 8px 6px;
gap: 0px;
}
#scp-primary .scp-aff-container {
display: flex;
flex-direction: column;
border: unset;
}
#scp-primary main.scp-aff-main-content {
border: 1px solid var(--border);
margin-top: 10px;
padding: 15px;
}
#scp-primary .scp-aff-nav-item:hover,
#scp-primary .scp-aff-nav-item.active {
background: var(--scp-aff-verical-menu-active-bg, #00ccc8);
color: var(--scp-aff-verical-menu-active-text, #ffffff);
}
#scp-primary .scp-aff-nav-item {
padding: 8px 14px 8px;
border-bottom: 0;
border-radius: 7px;
}
#scp-primary .scp-main-content-area.scp-my-account-start.scp-aff-activated:not(.scp-dont-move-aff-to-left) .scp-my-account-sidebar {
margin-left: 0;
width: 100%;
}
body #scp-primary h2.scp-aff-title-main {
width: 100%;
text-align: left;
}
body #scp-primary .scp-aff-table td .scp-aff-link-box { width: 100%; }
}
@container (max-width: 991px) {
body #scp-primary .scp-aff-table td .scp-aff-link-text { display: none; }
body #scp-primary td .scp-aff-link-box { padding: 0; border: none; margin: 0 0 0 auto; }
#scp-primary .scp-aff-page-header.scp-row-flex { display: flex; flex-direction: row; flex-wrap: wrap; }
#scp-primary .scp-aff-page-header.scp-row-flex .scp-aff-col-left {width: 100%;}
#scp-primary .scp-aff-page-header.scp-row-flex .scp-aff-col-right {width: 100%;margin-top: 10px;}
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper{ justify-content: flex-start; }
body #scp-primary .scp-dashboard-metric.scp-card { width: calc(33% - 6px); }
#scp-primary .scp-aff-main-content .scp-aff-table td.scp-empty-box-td {width: 100%; padding: 10px !important; text-align: center; margin: auto; display: flex ; background: transparent; align-items: center; justify-content: center; }
}
@container (max-width: 768px) {
#scp-primary .scp-aff-container { padding: 15px; }
#scp-primary .scp-aff-filter-tabs { justify-content: center; }
#scp-primary .scp-aff-filter-options { justify-content: center; }
#scp-primary .scp-aff-table-header th,
#scp-primary .scp-aff-table-row td { padding: 12px 16px; }
#scp-primary .scp-aff-search-input { max-width: 100%; }
#scp-primary .scp-aff-username { font-size: 13px; }
#scp-primary .scp-aff-commission-header { flex-direction: column; align-items: flex-start; gap: 12px; }
#scp-primary .scp-aff-commission-details { grid-template-columns: repeat(2, 1fr); gap: 20px; }
#scp-primary .scp-aff-detail-value { font-size: 18px; }
#scp-primary .scp-aff-container { flex-direction: column; }
#scp-primary .scp-aff-sidebar.mobile-active { display: block; }
#scp-primary .scp-aff-stats-grid { grid-template-columns: 1fr; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container { padding: 0; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container a.scp-aff-nav-item { padding: 10px; min-width: 50%; }
#scp-primary .scp-aff-copy-btn { position: unset; transform: unset; margin-top: 0; }
.scp-aff-col-row-multi { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.scp-aff-col-row-multi div#selectedValue { width: 100%; }
#scp-primary .scp-aff-date-range-main-wrapper { width: 100%; }
#scp-primary .scp-aff-stats-grid { display: flex; flex-direction: row; flex-wrap: wrap; }
#scp-primary .scp-aff-stats-grid .scp-dashboard-metric.scp-card { width: 100%; }
table#scp-aff-earnings-table tr td:first-child { min-width: 180px; }
/*Table*/
#scp-primary .scp-aff-main-content .scp-aff-table,
#scp-primary .scp-aff-main-content .scp-aff-table thead,
#scp-primary .scp-aff-main-content .scp-aff-table tbody,
#scp-primary .scp-aff-main-content .scp-aff-table th,
#scp-primary .scp-aff-main-content .scp-aff-table td,
#scp-primary .scp-aff-main-content .scp-aff-table tr {
display: block;
}
#scp-primary .scp-aff-main-content .scp-aff-table tbody{ background-color: transparent; }
#scp-primary .scp-aff-main-content .scp-aff-table thead {
display: none; /* Hide table headers */
}
#scp-primary .scp-aff-main-content .scp-aff-table tr {
margin-bottom: 15px;
border: 1px solid #ccc;
padding: 10px;
background: #fff;
border-radius: 6px;
}
#scp-primary .scp-aff-main-content .scp-aff-table td {
position: relative;
text-align: left;
border: none;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
word-break: break-word;
overflow-wrap: anywhere;
white-space: normal;
justify-content: space-between;
max-width: 100%;
}
#scp-primary .scp-aff-main-content .scp-aff-table td:last-child { border-bottom: 0; padding-bottom: 0; }
#scp-primary .scp-aff-main-content .scp-aff-table td::before {
content: attr(data-label) ": ";
position: relative;
font-weight: bold;
min-width: max-content;
width: 30%;
}
#scp-primary .scp-aff-main-content .scp-aff-table td.scp-empty-box-td::before { display: none; }
#scp-primary .scp-aff-main-content .scp-aff-table {
border: none;
}
#scp-primary .scp-aff-btn-success { width: 100%; }
#scp-primary .scp-aff-btn-success {
width: 100%;
}
#scp-primary .scp-aff-banner-grid {
display: flex;
flex-direction: column;
}
#scp-primary .scp-aff-banner-grid .scp-aff-banner-item {width: 100%;}
#scp-primary .scp-aff-banner-grid .scp-aff-banner-item .scp-banner-button-container {
display: flex;
flex-direction: column;
width: 100%;
}
#scp-primary .scp-aff-banner-grid .scp-aff-banner-item .scp-banner-button-container .scp-aff-btn {
width: 100%;
}
#scp-primary .scp-aff-banner-preview {
height: 170px;
}
#scp-primary .scp-aff-policy-buttons a.scp-open-modal {
font-size: 13px;
}
#scp-primary .scp-aff-commision-with-link .scp-aff-link-section {
max-width: 100%;
}
#scp-primary .scp-aff-commision-with-link .scp-aff-copy-btn i.fas.fa-copy {
display: none;
}
#scp-primary .scp-aff-commision-with-link .scp-aff-commision-inner-row {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
#scp-primary .scp-aff-commision-with-link .scp-aff-commision-inner-row > div {
width: 100%;
}
#scp-primary .scp-aff-commision-with-link .scp-aff-commision-inner-row > div.scp-aff-commission-rate {
width: max-content;
}
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center; margin-top: 10px; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter { min-width: unset; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-filter-btn-box { margin-top: 20px; }
#scp-primary .scp-aff-title-with-link { display: flex; flex-direction: column; gap: 0; }
#scp-primary .scp-promo-referal-list { display: flex; flex-direction: column; }
#scp-primary .scp-promo-referal-item { width: 100%; }
#scp-primary .scp-aff-main-content .scp-aff-table td.scp-tbl-center {
text-align: left!important;
}
#scp-primary .scp-aff-main-content .scp-aff-table td:before {
font-weight: 600!important;
color: #000;
}
#scp-primary .scp-aff-setting-fields-grid{ display: block; }
#scp-primary .scp-aff-nav-item { width: 100%; }
#scp-primary .scp-aff-status-legend-tooltip{ left: 0; }
}
@container (max-width: 768px) {
#scp-primary .scp-aff-container-leader-board { padding: 0; }
#scp-primary .scp-aff-responsive-table-wrapper { width: 100%; box-shadow: none; }
#scp-primary .scp-aff-responsive-table-wrapper .scp-aff-table { border: none; }
#scp-primary .scp-aff-table-wrapper{ background-color: transparent; }
#scp-primary .scp-aff-responsive-table-wrapper thead { display: none; }
#scp-primary .scp-aff-responsive-table-wrapper tbody { display: flex; flex-direction: column; gap: 12px; background: transparent; box-shadow: none; }
#scp-primary .scp-aff-responsive-table-wrapper tr { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e6ea; border-radius: 8px; padding: 12px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
#scp-primary .scp-aff-responsive-table-wrapper td { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border: none; font-size: 14px; }
#scp-primary .scp-aff-responsive-table-wrapper td::before { content: attr(data-label); font-weight: 600; color: #6c757d; flex: 1; text-align: left; font-size: 11px; }
#scp-primary .scp-aff-responsive-table-wrapper td > *:not(:first-child) { flex: 1; text-align: right; }
#scp-primary .scp-aff-responsive-table-wrapper .scp-aff-user-info { justify-content: space-between; gap: 8px; }
#scp-primary .scp-aff-responsive-table-wrapper .scp-aff-avatar { width: 26px; height: 26px; }
#scp-primary .scp-aff-responsive-table-wrapper #scp-aff-main-table td.scp-aff-rank { zoom: 1; }
#scp-primary .scp-aff-responsive-table-wrapper #scp-aff-main-table td { padding: 0; border-bottom: 1px solid gainsboro; padding-bottom: 10px!important; margin-bottom: 10px!important; }
#scp-primary .scp-aff-responsive-table-wrapper #scp-aff-main-table td:last-child { margin-bottom: 0!important; padding-bottom: 0!important; border-bottom: 0; }
#scp-primary .scp-aff-responsive-table-wrapper .scp-aff-rank-badge { zoom: 0.6; }
body #scp-primary .scp-default-leftside-layout { padding: 0; }
#scp-primary .scp-aff-link-box { max-width: 100%; line-height: 1.5; }
#scp-primary .scp-aff-link-text { line-height: 1.5; }
body #scp-primary .scp-aff-input-wrap .scp-aff-link-text { display: none; }
#scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-main-content { padding: 20px; }
.scp-aff-readmore-link { display: none; }
}
@container (max-width: 480px) {
#scp-primary .scp-aff-table-header th:nth-child(3),
#scp-primary .scp-aff-table-row td:nth-child(3) { display: none; }
#scp-primary .scp-aff-avatar { width: 32px; height: 32px; }
#scp-primary .scp-aff-rank-badge { width: 28px; height: 28px; font-size: 12px; }
#scp-primary span.scp-aff-rank-badge.scp-aff-rank-1:after,
span.scp-aff-rank-badge.scp-aff-rank-2:after,
span.scp-aff-rank-badge.scp-aff-rank-3:after {top: 10px;width: 14px;}
#scp-primary .scp-aff-commission-details { grid-template-columns: 1fr; gap: 16px; }
#scp-primary .scp-aff-commission-card { padding: 10px; }
#scp-primary .scp-aff-status-legend-tooltip{ width: 240px; }
}
/* The earnings filter sits in a 40px row beside the date inputs, but its own
box asked for more than that: a 21px line box plus 12px of padding top and
bottom and a 2px border comes to 48px. Held to 40px with overflow clipped,
the selected option was cut off across the middle -- "Paid Earnings" lost its
descenders and read as though nothing was chosen.
A select centres its own text vertically once a height is set, so the height
is stated and the vertical padding removed rather than guessed at. */
#scp-primary .scp-aff-col-row-multi select#scp-aff-earning-filter {
height: 40px;
padding-top: 0;
padding-bottom: 0;
line-height: normal;
}
/* Headings and descriptions across the affiliate front end.
The dashboard grew section by section, so its headings drifted apart: page
titles, card titles and the inner h4s each carried #2c3e50 at weight 600,
banner and promo headings sat on #000/#222/#444, and the greys under them
ran #555, #666, #808080 and #64748b. Read down a single tab and no two
levels agreed. One rule per role instead: every heading is black and bold,
every supporting line is #707070.
Listed last in the file and prefixed with `body` so these land after the
per-section rules above without needing !important. Only colour and weight
are stated -- size, spacing and layout stay with the rules that own them. */
body #scp-primary .scp-aff-page-title,
body #scp-primary .scp-aff-card-title,
body #scp-primary .scp-aff-card-inner-header h4,
body #scp-primary label.scp-aff-label,
body #scp-primary .scp-aff-setting-section-title,
body #scp-primary .scp-aff-setting-label,
body #scp-primary .scp-aff-setting-checkbox-label,
body #scp-primary .scp-aff-accordion-header h3,
body #scp-primary .scp-banner-info-section h3,
body #scp-primary .scp-aff-banner-preview h4,
body #scp-primary .scp-promo-referal-title,
body #scp-primary .scp-promo-referal-subtitle,
body #scp-primary h2.scp-aff-title-main,
body #scp-primary .scp-aff-table th {
color: #000000;
font-weight: 700;
}
/* 30px under a section heading was set when the title was 28px and the
subtitle sat at 15px with wide tracking -- a heading that size can carry
that much air. Both came down in the redesign, and the gap stayed, so the
heading reads as detached from the panel it names rather than attached to
it. Every tab uses the same value, so they all tighten together. */
body #scp-primary .scp-aff-page-header { margin-bottom: 18px; }
body #scp-primary .scp-aff-page-subtitle,
body #scp-primary .scp-aff-accordion-description,
body #scp-primary .scp-promo-referal-description,
body #scp-primary .scp-aff-setting-helper-text,
body #scp-primary .scp-banner-info-section p,
body #scp-primary .scp-aff-stat-title,
body #scp-primary .scp-info-card h3 {
color: #707070;
}
/* Traffic table: Referrer and Destination cells.
Both carry values that can be arbitrarily long -- a referring domain, a full
landing URL -- and letting either size its own column pushed the rest of the
table off screen. Fixed width, ellipsis, full value on hover. */
.scp-aff-ref,
.scp-aff-dest {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
cursor: default;
}
.scp-aff-ref {
width: 96px;
}
.scp-aff-dest {
width: 200px;
}
/* ---------------------------------------------------------------------------
Referral-link hero.
An affiliate has one tool, and it used to sit in the middle of a stack of
equal-weight fields with a dashed border around it. It leads the screen now,
with the only figures worth putting beside a link: whether anyone clicks it
and whether clicking turns into anything.
Every colour here is a creator variable. Nothing in this block introduces a
value the affiliate styles screen cannot already reach.
--------------------------------------------------------------------------- */
body #scp-primary .scp-aff-hero {
display: grid;
grid-template-columns: minmax(0, 1.1fr) 1px auto;
align-items: center;
gap: 28px;
padding: 24px 26px;
background: var(--scp-aff-surface, #ffffff);
border: 1px solid var(--scp-aff-line, #e3e9e8);
border-radius: var(--scp-aff-radius-lg, 12px);
}
body #scp-primary .scp-aff-hero-rule {
background: var(--scp-aff-line, #e3e9e8);
align-self: stretch;
}
body #scp-primary .scp-aff-hero-label {
font-size: 15px;
font-weight: 700;
color: #000000;
margin: 0 0 12px;
line-height: 1.25;
letter-spacing: -.01em;
}
/* The link reads as a field, not as another card: a light fill says "this is a
value you take" without spending a border on it. Tighter too -- the box was
standing taller than the button inside it needed. */
body #scp-primary .scp-aff-hero .scp-aff-link-box-hero {
padding: 6px 6px 6px 14px;
background: var(--scp-aff-sunken, #f4f8f7);
border-color: var(--scp-aff-line, #e3e9e8);
width: auto;
max-width: 100%;
}
body #scp-primary .scp-aff-hero .scp-aff-link-box-hero .scp-aff-link-text {
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}
/* The copy button carries a word as well as the glyph: an icon alone asks the
affiliate to guess, and this is the one control on the screen that matters. */
body #scp-primary .scp-aff-hero .scp-aff-copy-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 13px;
font-weight: 600;
}
body #scp-primary .scp-aff-hero-meta {
display: flex;
gap: 26px;
margin: 0;
padding: 0;
list-style: none;
}
body #scp-primary .scp-aff-hero-meta li {
margin: 0;
padding: 0;
list-style: none;
line-height: 1.3;
}
body #scp-primary .scp-aff-hero-meta b {
display: block;
font-size: 26px;
font-weight: 700;
color: #000000;
letter-spacing: -.03em;
line-height: 1;
margin-bottom: 4px;
font-variant-numeric: tabular-nums;
}
body #scp-primary .scp-aff-hero-meta span {
font-size: 12px;
color: var(--scp-aff-muted, #707070);
}
/* The rule is a column of the grid, so it has to become a row before the
columns stack or it keeps its full height in a one-column layout. */
@media (max-width: 900px) {
body #scp-primary .scp-aff-hero {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
body #scp-primary .scp-aff-hero-rule { height: 1px; align-self: auto; }
body #scp-primary .scp-aff-hero-meta { gap: 22px; flex-wrap: wrap; }
body #scp-primary .scp-aff-hero-meta b { font-size: 22px; }
}
/* ---------------------------------------------------------------------------
One frame per thing.
A card already draws an edge, so anything inside it that draws its own is a
second edge saying the same thing -- which is what makes a screen read as
boxes inside boxes. The card keeps the frame; its contents keep their
spacing and their internal rules.
Scoped as descendants rather than children: the hero sits inside
.scp-aff-box, and the tables are wrapped for horizontal scrolling on narrow
screens, so neither is a direct child of the card.
--------------------------------------------------------------------------- */
body #scp-primary .scp-aff-card .scp-aff-hero {
border: 0;
border-radius: 0;
padding: 0;
background: transparent;
}
/* The header rule and the row rules already separate a table's parts; its outer
box only ever duplicated the card's. */
body #scp-primary .scp-aff-card .scp-aff-table {
border: 0;
margin-top: 0;
}
/* Same rule, one level further in: the metric tiles are cards in their own
right, so they are never nested inside another one. */
body #scp-primary .scp-aff-card .scp-dashboard-metric.scp-card {
border-radius: var(--scp-aff-radius, 8px);
}
/* The content area was a bordered white panel that then held bordered white
cards -- the outermost box-in-box, and the one the eye notices first. It
becomes the ground the cards sit on instead. The nav above it is already its
own rounded object, so the two no longer need to join into one slab. */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container .scp-aff-main-content {
border: 0;
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-main-content {
background: transparent;
padding: 18px 0 0;
}
/* ---------------------------------------------------------------------------
Welcome.
The one screen every affiliate sees first, and the only one whose content is
written by the creator rather than by us -- so the work here is typographic,
not structural. Nothing rewrites their words.
Real list spacing, because the default copy is four "quick tips" that were
set solid and read as one paragraph.
--------------------------------------------------------------------------- */
/* No measure here. A reading measure is right for a column of prose, but this
card is full width, so capping the text two-thirds across leaves a band of
empty card down the right that reads as a mistake rather than a choice. */
body #scp-primary #affiliate-welcome .scp-rich-editor-content {
max-width: none;
}
body #scp-primary #affiliate-welcome .scp-rich-editor-content > *:first-child {
margin-top: 0;
}
body #scp-primary #affiliate-welcome .scp-rich-editor-content h3 {
font-size: 21px;
font-weight: 700;
color: #000000;
letter-spacing: -.02em;
line-height: 1.25;
margin: 0 0 10px;
}
body #scp-primary #affiliate-welcome .scp-rich-editor-content ul {
margin: 14px 0 18px;
padding-left: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
/* The stored default nests its tips one level down inside a marker-less
,
so the gap has to be re-stated on the inner list or the items sit solid. */
body #scp-primary #affiliate-welcome .scp-rich-editor-content ul ul {
margin: 0;
gap: 10px;
}
body #scp-primary #affiliate-welcome .scp-rich-editor-content li {
/* The marker is drawn by the li, and something further up sets it to disc,
so clearing it on the ul alone leaves a native bullet beside our dot. */
list-style: none;
margin: 0;
padding: 12px 16px 12px 40px;
/* Pulls the marker back into the 40px gutter. Wrapped lines are unaffected,
so they still align under the text and not under the dot. */
text-indent: -24px;
background: var(--scp-aff-sunken, #f4f8f7);
border-radius: var(--scp-aff-radius, 8px);
line-height: 1.5;
font-size: 13.5px;
color: #3d4f4e;
}
/* An
that only holds another list is scaffolding in the stored content,
not a tip -- it must not draw a chip of its own around the real ones. */
body #scp-primary #affiliate-welcome .scp-rich-editor-content li:has(> ul) {
background: transparent;
padding: 0;
border-radius: 0;
}
/* An absolutely-positioned dot has to be told where the first line's centre is,
and there is no honest way to state that: the rendered line box is the
font's, not the line-height, so every em or lh calculation lands a pixel
or so out and moves again if the face changes. An inline marker with
vertical-align centres itself on the line whatever the font does. */
body #scp-primary #affiliate-welcome .scp-rich-editor-content li::before {
content: "";
display: inline-block;
vertical-align: middle;
width: 7px;
height: 7px;
margin-right: 17px;
text-indent: 0;
border-radius: 50%;
background: var(--scp-aff-primary-bg, #00ccc8);
}
body #scp-primary #affiliate-welcome .scp-rich-editor-content li:has(> ul)::before {
display: none;
}
/* ---------------------------------------------------------------------------
Card head: icon, title, one line of context.
Sections were announced by a bare bold line, so every card on a screen
looked the same until you read it. The icon is the part you recognise
without reading, and it tints from the creator's own accent rather than
introducing a colour of its own.
--------------------------------------------------------------------------- */
body #scp-primary .scp-aff-cardhead {
display: flex;
align-items: flex-start;
gap: 13px;
margin-bottom: 18px;
}
body #scp-primary .scp-aff-cardhead-icon {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
/* 12% of the accent, so the chip reads as a tint of the site's own colour
on any hue a creator picks, dark or light. */
background: color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 12%, transparent);
color: var(--scp-aff-primary-bg, #00ccc8);
}
body #scp-primary .scp-aff-cardhead .scp-aff-card-title {
display: block;
margin: 1px 0 0;
}
body #scp-primary .scp-aff-card-sub {
font-size: 13.5px;
line-height: 1.45;
color: var(--scp-aff-muted, #707070);
margin: 3px 0 0;
}
/* The two policy links were bare anchors in a row, which gave a document the
same weight as a word. They are rows you can hit now, with the chevron
saying the obvious thing: this opens. */
body #scp-primary .scp-aff-doclist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 10px;
}
body #scp-primary .scp-aff-doclist .scp-link-button {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 16px;
/* Carried at rest, not on hover. These two are the only things on the
screen an affiliate is asked to go and read, so they should look
inviting before the pointer finds them -- a row that only announces
itself on hover is invisible to anyone skimming, and to touch. */
border: 1px solid var(--scp-aff-primary-bg, #00ccc8);
border-radius: var(--scp-aff-radius, 8px);
background: color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 5%, #fff);
color: #000000;
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: background-color .15s ease;
}
/* Hover still has somewhere to go: the same tint, deeper. */
body #scp-primary .scp-aff-doclist .scp-link-button:hover {
background: color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 12%, #fff);
text-decoration: none;
}
body #scp-primary .scp-aff-doclist .scp-link-button > svg:first-child {
flex: 0 0 auto;
color: var(--scp-aff-primary-bg, #00ccc8);
}
body #scp-primary .scp-aff-doclist .scp-link-button span { flex: 1; }
body #scp-primary .scp-aff-doclist-go { flex: 0 0 auto; color: var(--scp-aff-muted, #707070); }
/* The custom link only appears once claimed, so it needs air above it rather
than sitting flush against the field that creates it. */
body #scp-primary .scp-aff-box.scp-my-affiliate-link.scp-show-my-link {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--scp-aff-line, #e3e9e8);
}
/* The Save button sits flush against the field it belongs to, so the edge that
meets the input must not round. Its outer corners are left alone -- the input
group clips them to its own radius via overflow, which is what keeps the pair
reading as one control.
Needs .scp-btn in the selector to outrank scp-common.css's
`html body:not(.scp-allow-elements) #scp-primary .scp-btn { border-radius:5px }`,
which was putting a 5px notch on the join. */
html body #scp-primary .scp-aff-input-wrap .scp-aff-save-btn.scp-btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Three tables that are each empty on a new account produced three identical
"No data found." lines down the page. One sentence per table, saying which
thing is missing, is the least a reader needs to tell them apart. */
body #scp-primary #dashboard td.scp-empty-box-td {
padding: 30px 20px;
}
/* An icon head that adds no element: the icon is a span dropped in as the
head's first child, and grid places it beside the title with the description
flowing under the title rather than under the icon. Keeping the DOM shape
identical matters here -- these three heads sit inside tab panels whose
div balance decides whether the panels below them stay inside the content
area at all. */
body #scp-primary .scp-aff-card-header.scp-aff-has-icon {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 13px;
align-items: start;
margin-bottom: 18px;
padding-bottom: 0;
border-bottom: 0;
}
body #scp-primary .scp-aff-card-header.scp-aff-has-icon > .scp-aff-cardhead-icon {
grid-row: 1 / span 2;
}
/* The Referrals head carries its Status Legend on the right, so its one child
spans both rows instead. */
body #scp-primary .scp-aff-card-header.scp-aff-has-icon > .scp-aff-title-with-link {
grid-row: 1 / span 2;
width: 100%;
}
body #scp-primary .scp-aff-card-header.scp-aff-has-icon .scp-aff-card-title {
margin: 1px 0 0;
}
/* The metric row was sized for four tiles at 25% each. Three is what these
screens actually render, so a quarter of the row sat empty on the right.
Letting them share the row means the count can change without the maths
having to be redone. */
body #scp-primary .scp-aff-stats-grid .scp-dashboard-metric.scp-card {
flex: 1 1 0;
width: auto;
min-width: 0;
}
/* scp-auto-table-width sizes a table to its columns, which is right on a wide
page and wrong inside a card: a two-column table left 800px of empty card
beside it, and an empty one put "No data found." under a 324px header that
looked like a rendering fault. Inside a card the table fills the card. */
body #scp-primary .scp-aff-card .scp-table-wrapper.scp-auto-table-width .scp-aff-table {
width: 100%;
}
/* ===========================================================================
Reports overview: metric tiles that show movement, and a bento row.
Every colour resolves from a creator variable.
=========================================================================== */
/* The tile is a small stack now: label, then figure and change, then shape. */
body #scp-primary .scp-aff-stats-grid .scp-dashboard-metric.scp-card {
gap: 10px;
padding: 16px 18px 14px;
overflow: hidden;
}
body #scp-primary .scp-info-card-icon-wrapper {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 10px;
}
body #scp-primary .scp-aff-metric-note {
font-size: 12px;
color: var(--scp-aff-muted, #707070);
margin: 0;
line-height: 1.3;
}
/* Direction is carried by the arrow and the word, not by colour alone: the
chips stay legible to anyone who cannot separate the two hues. */
body #scp-primary .scp-aff-chip {
font-size: 11.5px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
body #scp-primary .scp-aff-chip.is-up { color: #146c45; background: #e2f4ec; }
body #scp-primary .scp-aff-chip.is-down { color: #9a3412; background: #fdeae2; }
body #scp-primary .scp-aff-chip.is-flat { color: var(--scp-aff-muted, #707070); background: var(--scp-aff-sunken, #f4f8f7); }
body #scp-primary .scp-aff-chip.is-up::before { content: "\2197 "; }
body #scp-primary .scp-aff-chip.is-down::before { content: "\2198 "; }
/* Stretched to the tile's width; the stroke is held at 2px by
non-scaling-stroke so it does not distort with the box. */
body #scp-primary .scp-aff-spark {
display: block;
width: 100%;
height: 30px;
margin: 0;
}
body #scp-primary .scp-aff-spark-fill {
fill: color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 14%, transparent);
}
body #scp-primary .scp-aff-spark-line {
stroke: var(--scp-aff-primary-bg, #00ccc8);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
body #scp-primary .scp-aff-spark-dot {
fill: var(--scp-aff-primary-bg, #00ccc8);
stroke: var(--scp-aff-surface, #fff);
stroke-width: 2;
}
/* Two thirds / one third, stacking on a narrow screen. */
body #scp-primary .scp-aff-bento {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 14px;
margin-bottom: 16px;
}
body #scp-primary .scp-aff-bento > .scp-aff-card { margin-bottom: 0; }
@media (max-width: 900px) {
body #scp-primary .scp-aff-bento { grid-template-columns: minmax(0, 1fr); }
}
/* One bar per day. align-items:flex-end so every bar grows from the baseline,
and a zero day keeps a hairline so the month reads as thirty days rather
than as however many happened to have traffic. */
body #scp-primary .scp-aff-bars {
display: flex;
align-items: flex-end;
gap: 3px;
height: 120px;
padding-top: 6px;
}
body #scp-primary .scp-aff-bar {
flex: 1 1 0;
min-width: 0;
border-radius: 3px 3px 0 0;
background: var(--scp-aff-primary-bg, #00ccc8);
transition: opacity .12s ease;
}
body #scp-primary .scp-aff-bar:hover { opacity: .7; }
body #scp-primary .scp-aff-bar.is-zero {
height: 2px !important;
background: var(--scp-aff-line, #e3e9e8);
border-radius: 2px;
}
body #scp-primary .scp-aff-bars-axis {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 11.5px;
color: var(--scp-aff-muted, #707070);
font-variant-numeric: tabular-nums;
}
body #scp-primary .scp-aff-bars-peak { font-weight: 600; color: #000; }
/* Landing pages: label, magnitude, count. One hue -- the row label already
carries the identity, so colour would be encoding nothing. */
body #scp-primary .scp-aff-pagelist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
body #scp-primary .scp-aff-pagelist li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 5px 12px;
margin: 0;
}
body #scp-primary .scp-aff-pagelist-name {
grid-column: 1;
grid-row: 1;
font-size: 12.5px;
color: #000;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
body #scp-primary .scp-aff-pagelist-num {
grid-column: 2;
grid-row: 1;
font-size: 12.5px;
font-weight: 700;
color: #000;
font-variant-numeric: tabular-nums;
}
body #scp-primary .scp-aff-pagelist-track {
grid-column: 1 / -1;
grid-row: 2;
height: 7px;
border-radius: 4px;
background: var(--scp-aff-sunken, #f4f8f7);
overflow: hidden;
}
body #scp-primary .scp-aff-pagelist-fill {
display: block;
height: 100%;
border-radius: 4px;
background: var(--scp-aff-primary-bg, #00ccc8);
}
/* Nothing-to-show, inside a card that already has a heading explaining what
would be here. One quiet sentence, no border, no icon, no alarm. */
body #scp-primary .scp-aff-quiet {
padding: 26px 4px;
text-align: center;
font-size: 13px;
color: var(--scp-aff-muted, #707070);
}
/* ---------------------------------------------------------------------------
Report filters.
These were a sunken slab beside the page title, tall enough that the search
button wrapped onto a line of its own with dead space beside it. They are
controls, not a panel: one row, aligned on their bottom edges, sized so the
row cannot wrap.
--------------------------------------------------------------------------- */
body #scp-primary .scp-aff-date-range-main-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: flex-end;
gap: 8px;
background: none;
border: 0;
padding: 0;
}
body #scp-primary .scp-aff-col-right.scp-with-datefilter { align-self: flex-end; }
body #scp-primary .filter-label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--scp-aff-muted, #707070);
margin: 0 0 5px 2px;
line-height: 1.2;
white-space: nowrap;
}
body #scp-primary .scp-aff-date-range-main-wrapper .date-input,
body #scp-primary .scp-aff-date-range-main-wrapper select#scp-aff-earning-filter {
height: 40px;
border: 1px solid var(--scp-aff-line-strong, #d3dedd);
border-radius: var(--scp-aff-radius, 8px);
background-color: var(--scp-aff-surface, #fff);
font-size: 13.5px;
color: #000;
padding: 0 12px;
margin: 0;
min-width: 0;
}
body #scp-primary .scp-aff-date-range-main-wrapper .date-input { width: 132px; }
body #scp-primary .scp-aff-date-range-main-wrapper select#scp-aff-earning-filter { width: 150px; }
body #scp-primary .scp-aff-date-range-main-wrapper .date-input:focus,
body #scp-primary .scp-aff-date-range-main-wrapper select#scp-aff-earning-filter:focus {
border-color: var(--scp-aff-primary-bg, #00ccc8);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 20%, transparent);
outline: none;
}
/* The search control is the row's action, so it matches the fields' height and
sits on the same baseline instead of dropping below them. */
body #scp-primary .scp-filter-btn-box { display: flex; align-items: flex-end; }
body #scp-primary .scp-filter-btn-box > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--scp-aff-radius, 8px);
background: var(--scp-aff-primary-bg, #00ccc8);
color: var(--scp-aff-primary-text-color, #ffffff);
margin: 0;
padding: 0;
text-decoration: none;
transition: filter .15s ease;
}
body #scp-primary .scp-filter-btn-box > a:hover { filter: brightness(.94); }
body #scp-primary .scp-filter-btn-box > a svg { width: 18px; height: 18px; }
/* On a narrow card the row drops under the heading and reads left to right. */
@media (max-width: 900px) {
body #scp-primary .scp-aff-page-header.scp-row-flex { flex-direction: column; align-items: stretch; gap: 14px; }
body #scp-primary .scp-aff-date-range-main-wrapper { justify-content: flex-start; }
}
/* ---------------------------------------------------------------------------
Tables.
A filled header band, a box around the whole thing and a rule under every
row gave three different edges competing for the same job. One strong rule
under the header separates the labels from the data; hairlines between rows
group them; the card supplies the outer edge. Nothing else is drawn.
--------------------------------------------------------------------------- */
body #scp-primary .scp-aff-card .scp-aff-table th {
background: none;
border-bottom: 1.5px solid var(--scp-aff-line-strong, #d3dedd);
padding: 0 14px 11px;
font-size: 12.5px;
font-weight: 700;
color: #000;
letter-spacing: 0;
white-space: nowrap;
}
body #scp-primary .scp-aff-card .scp-aff-table td {
padding: 15px 14px;
border-bottom: 1px solid var(--scp-aff-line-soft, #eef3f2);
font-size: 13.5px;
color: #3d4f4e;
vertical-align: middle;
}
body #scp-primary .scp-aff-card .scp-aff-table tbody tr:last-child td { border-bottom: 0; }
/* A row is a record, so it answers when you point at it. The tint is the
creator's own accent at 4%, which stays a hint on any hue they pick. */
body #scp-primary .scp-aff-card .scp-aff-table tbody tr:hover {
background: color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 4%, transparent);
}
/* Money and counts line up on the decimal and sit under their own heading. */
body #scp-primary .scp-aff-card .scp-aff-table td.scp-aff-earnings,
body #scp-primary .scp-aff-card .scp-aff-table th.scp-tbl-center,
body #scp-primary .scp-aff-card .scp-aff-table td.scp-tbl-center {
text-align: center;
}
body #scp-primary .scp-aff-card .scp-aff-table td {
font-variant-numeric: tabular-nums;
}
/* The first column is what the row is about, so it carries the weight. */
body #scp-primary .scp-aff-card .scp-aff-table tbody td:first-child {
color: #000;
font-weight: 600;
}
/* Nothing to show sits in the middle of the space the table would have used,
rather than as a bare line under a header with a border box around it. */
body #scp-primary .scp-aff-card td.scp-empty-box-td,
body #scp-primary .scp-aff-card .scp-empty-box-div {
background: none;
border: 0;
box-shadow: none;
padding: 34px 20px;
color: var(--scp-aff-muted, #707070);
font-size: 13px;
}
/* ---------------------------------------------------------------------------
Metric tiles: shorter, lighter, and each one recognisable at a glance.
They sat on white inside a white card area, so the only thing separating a
tile from the page was its border. A light fill does that job better and
lets the border drop back to a hairline. The icon rides with the label
rather than sitting in a corner of its own, which is what let the height
come down without crowding the figure.
--------------------------------------------------------------------------- */
body #scp-primary .scp-aff-stats-grid .scp-dashboard-metric.scp-card {
background: var(--scp-aff-sunken, #f4f8f7);
border-color: var(--scp-aff-line, #e3e9e8);
box-shadow: none;
padding: 13px 15px 0;
gap: 4px;
}
body #scp-primary .scp-aff-stats-grid .scp-info-card {
margin-bottom: 0;
align-items: center;
}
body #scp-primary .scp-aff-stats-grid .scp-info-card-content {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
body #scp-primary .scp-aff-tile-icon {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 13%, transparent);
color: var(--scp-aff-primary-bg, #00ccc8);
}
body #scp-primary .scp-aff-stats-grid .scp-info-card h3 {
font-size: 13px;
font-weight: 700;
color: #000;
margin: 0;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body #scp-primary .scp-aff-stats-grid .scp-dashboard-value {
font-size: 26px;
line-height: 1.05;
}
body #scp-primary .scp-aff-stats-grid .scp-info-card-icon-wrapper {
margin-top: 2px;
}
body #scp-primary .scp-aff-metric-note { margin-bottom: 13px; }
/* The sparkline sits on the floor of the tile so the fill reads as part of the
box, which is what lets the tile lose height without losing the shape of the
month. It does NOT bleed past the sides: the tile clips its overflow, and a
bleed put the end dot -- the one point worth seeing -- outside the card. */
body #scp-primary .scp-aff-spark {
height: 26px;
width: 100%;
margin: 4px 0 0;
display: block;
}
/* ---------------------------------------------------------------------------
"No data found."
Six different loaders write this row, plus one PHP site, all as a bare
string in a
. Styling the cell rather than editing seven call sites
means the treatment is the same wherever it appears and the translated
string is left alone.
The glyph is a mask, not a background image: a data URI cannot read a CSS
variable, so painting it as a background would hard-code a colour the
creator cannot change. Masking lets background-color supply the ink.
--------------------------------------------------------------------------- */
body #scp-primary .scp-aff-table td.scp-empty-box-td,
body #scp-primary .scp-aff-card td.scp-empty-box-td {
text-align: center;
padding: 42px 20px;
font-size: 13.5px;
color: var(--scp-aff-muted, #707070);
background: none;
border: 0;
box-shadow: none;
}
body #scp-primary td.scp-empty-box-td::before {
content: "";
display: block;
width: 30px;
height: 30px;
margin: 0 auto 14px;
background-color: var(--scp-aff-line-strong, #d3dedd);
-webkit-mask: var(--scp-aff-empty-glyph) center / contain no-repeat;
mask: var(--scp-aff-empty-glyph) center / contain no-repeat;
}
#scp-primary {
/* An open tray. Says "this is where things arrive", which is what an empty
affiliate table means -- not that anything has gone wrong. */
--scp-aff-empty-glyph: url('data:image/svg+xml;utf8,');
}
/* An empty row is not a record, so it does not light up under the pointer the
way a real one does. */
body #scp-primary .scp-aff-card .scp-aff-table tbody tr:hover:has(td.scp-empty-box-td) {
background: none;
}
/* ---------------------------------------------------------------------------
Traffic and Payouts, brought onto the same footing as Reports.
--------------------------------------------------------------------------- */
/* The old tile glyph sat in a corner of its own, hard-coded orange, red or
green -- three colours that meant nothing and that no creator could change.
The label now carries the icon instead, tinted from their accent. */
body #scp-primary .scp-aff-stats-grid .scp-info-card-icon {
display: none;
}
/* A referrer is a label, not prose: a short fixed vocabulary that repeats down
the column, so it reads as a set of tags rather than a sentence per row. */
body #scp-primary .scp-aff-table .scp-aff-ref {
display: inline-block;
/* Sized to its label, not to a fixed 96px column: that width made "X" a
chip six times wider than its text while still cutting newsletter-jan.
The vocabulary is short, so a ceiling is enough. */
width: auto;
max-width: 170px;
padding: 3px 9px;
border-radius: 999px;
background: var(--scp-aff-sunken, #f4f8f7);
border: 1px solid var(--scp-aff-line, #e3e9e8);
font-size: 12px;
font-weight: 600;
color: #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
/* The destination is a path. Monospaced so the slashes line up down the column
and a difference between two similar URLs is visible rather than guessed at;
quieter than the referrer, because it is the answer to a second question. */
body #scp-primary .scp-aff-table .scp-aff-dest {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
color: var(--scp-aff-muted, #707070);
width: auto;
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
/* A date is the row's anchor, so it holds its line rather than wrapping to two
and pushing every other cell apart. */
body #scp-primary .scp-aff-card .scp-aff-table td[data-label="Date"],
body #scp-primary .scp-aff-card .scp-aff-table th:first-child {
white-space: nowrap;
}
/* Lead is a yes/no, so the column is narrow and the answer sits under its own
heading rather than drifting across the width the browser gives it. */
body #scp-primary .scp-aff-card .scp-aff-table td[data-label="Lead"],
body #scp-primary .scp-aff-card .scp-aff-table td[data-label="Status"] {
width: 1%;
white-space: nowrap;
}
/* A tile's floor is zero-padded because the sparkline is meant to sit on it.
Traffic and Payouts tiles carry no sparkline, so without this the figure
rests flush against the bottom edge. :has() asks the question directly --
"is there a chart in here?" -- rather than maintaining a list of which
panels happen to have one. */
body #scp-primary .scp-aff-stats-grid .scp-dashboard-metric.scp-card:not(:has(.scp-aff-spark)) {
padding-bottom: 16px;
}
/* The note under Total Earnings was spacing itself off the floor with a margin;
the padding above owns that now, so the two do not stack. */
body #scp-primary .scp-aff-metric-note { margin-bottom: 0; }
/* ---------------------------------------------------------------------------
Settings.
The last tab still on the old treatment: a page header sitting inside its
own card, three nested card surfaces around a single field, and a Save
button floating in the middle of the row with nothing to anchor it.
--------------------------------------------------------------------------- */
/* Two of the three nested surfaces carried no styling of their own and exist
only as structure, so they simply stop taking up space. */
body #scp-primary #settings .scp-aff-setting-main-card,
body #scp-primary #settings .scp-aff-setting-section {
margin: 0;
padding: 0;
border: 0;
background: none;
}
/* One field to a row, capped at a width a reader's eye can track back from --
a full-width email box on a desktop card is a 1,100px target for an address
that is rarely 40 characters. */
body #scp-primary #settings .scp-aff-setting-fields-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
max-width: 560px;
}
body #scp-primary #settings .scp-aff-setting-label {
display: block;
font-size: 14px;
font-weight: 700;
color: #000;
margin: 0 0 7px;
line-height: 1.3;
}
/* The helper line lives inside the label element, so it has to be taken back
out of the label's weight and colour rather than inheriting them. */
body #scp-primary #settings .scp-aff-setting-helper-text {
font-size: 13px;
font-weight: 400;
color: var(--scp-aff-muted, #707070);
line-height: 1.45;
margin: 4px 0 0;
}
body #scp-primary #settings .scp-aff-input {
width: 100%;
height: 42px;
padding: 0 14px;
font-size: 13.5px;
color: #000;
background: var(--scp-aff-surface, #fff);
border: 1px solid var(--scp-aff-line-strong, #d3dedd);
border-radius: var(--scp-aff-radius, 8px);
outline: none;
}
body #scp-primary #settings .scp-aff-input:focus {
border-color: var(--scp-aff-primary-bg, #00ccc8);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 20%, transparent);
}
/* The action sits below a rule, at the start of the line, where the form ends
-- not centred in the middle of the card with nothing either side of it. */
body #scp-primary #settings .scp-setting-btn-wrapper {
display: flex;
justify-content: flex-start;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--scp-aff-line, #e3e9e8);
}
body #scp-primary #settings .scp-aff-btn-success {
background: var(--scp-aff-primary-bg, #00ccc8);
color: var(--scp-aff-primary-text-color, #ffffff);
border: 1px solid var(--scp-aff-primary-bg, #00ccc8);
display: inline-flex;
align-items: center;
gap: 8px;
}
body #scp-primary #settings .scp-aff-btn-success:hover { filter: brightness(.94); }
/* The confirmation only means anything after a save, so it does not sit under
the button announcing itself on arrival. */
body #scp-primary #settings .scp-form-messages { margin-top: 16px; }
/* Only once the save has happened. smart-creator-press-public.css hides
.scp-form-messages .scp-alert-box and the JS reveals it by adding
.scp-active -- so styling the base class with a display of its own turns
the confirmation on permanently, and the affiliate is told their settings
were updated before they have touched anything. */
body #scp-primary #settings .scp-alert-box.scp-aff-success.scp-active {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: var(--scp-aff-radius, 8px);
background: #e2f4ec;
color: #146c45;
border: 0;
}
body #scp-primary #settings .scp-alert-box.scp-aff-success p { margin: 0; font-size: 13.5px; }
body #scp-primary #settings .scp-alert-box-icon-svg { display: flex; }
body #scp-primary #settings .scp-alert-box-icon-svg svg { width: 18px; height: 18px; }
/* ---------------------------------------------------------------------------
Section nav.
A row of six links where only the active one was distinguishable, and only
by a pale fill that a creator can set to anything -- including something
close to the bar behind it. It reads as a segmented control now: a sunken
track, with the current section lifted out of it on a raised surface.
That inversion is the point. Rather than tinting the one item that is
selected, the five that are not recede into the track, so the current
section is legible whatever colour the creator has chosen. Their four menu
variables still supply every colour.
--------------------------------------------------------------------------- */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar {
width: 100%;
display: flex;
/* Wraps rather than scrolls. Measured: six sections need more track than a
768px tablet gives them, and a horizontal scroller draws no bar on touch,
so the hidden sections were hidden with nothing to say so. Wrapping costs
a row where it is needed and nothing where it is not. */
flex-wrap: wrap;
overflow-x: visible;
gap: 3px;
padding: 5px;
margin-bottom: 16px;
background: var(--scp-aff-sunken, #f4f8f7);
border: 1px solid var(--scp-aff-line, #e3e9e8);
border-radius: var(--scp-aff-radius-lg, 12px);
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar::-webkit-scrollbar {
display: none;
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border: 0;
border-radius: var(--scp-aff-radius, 8px);
font-size: 13.5px;
font-weight: 600;
letter-spacing: normal;
line-height: 1.2;
white-space: nowrap;
background: transparent;
/* The creator's own menu ink, held back so the selected item can lead.
Opacity rather than a second colour, so this works on any hue they set. */
color: var(--scp-aff-verical-menu-text, #000000) !important;
opacity: .62;
transition: opacity .12s ease, background-color .12s ease;
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item:hover {
opacity: 1;
background: color-mix(in srgb, var(--scp-aff-verical-menu-text, #000) 6%, transparent);
}
/* Lifted off the track: a real surface, a shadow, and full-strength ink. */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item.active {
opacity: 1;
font-weight: 700;
background: var(--scp-aff-verical-menu-active-bg, #ffffff);
color: var(--scp-aff-verical-menu-active-text, #000000) !important;
box-shadow: 0 1px 2px rgba(16, 32, 31, .10), 0 0 0 1px rgba(16, 32, 31, .04);
}
/* The glyph was 22px against 13.5px text -- bigger than the word it labels. */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
/* Narrow screens scroll the row rather than wrapping it to two lines, which
would push the panel below out of reach on a phone. */
@media (max-width: 720px) {
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar {
gap: 2px;
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item {
padding: 9px 12px;
}
}
/* The tiles sat on a neutral #f4f8f7 against a white content area -- a two-step
difference, so their edges disappeared and the row read as loose text rather
than as three objects. Both the fill and the border are now mixed from the
creator's accent: enough separation from white to give each tile a definite
shape, and tied to their palette rather than to a grey of mine, so it stays
coherent whatever colour they set. */
body #scp-primary .scp-aff-stats-grid .scp-dashboard-metric.scp-card {
background: color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 5%, #ffffff);
border: 1px solid color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 20%, var(--scp-aff-line, #e3e9e8));
box-shadow: 0 1px 2px rgba(16, 32, 31, .04);
}
body #scp-primary .scp-aff-stats-grid .scp-dashboard-metric.scp-card:hover {
border-color: color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 38%, var(--scp-aff-line, #e3e9e8));
}
/* The icon chip has to lift off that tint rather than melt into it, so it goes
solid instead of staying a wash of the same colour. */
body #scp-primary .scp-aff-tile-icon {
background: var(--scp-aff-surface, #ffffff);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 18%, transparent);
}
/* The chart's maximum, drawn as a scale label at the top of the plot with a
gridline running under it. "peak 8" sat in the middle of the date axis, a
number with no units between two dates -- here its position says what it is:
this line is the top of the chart, and this is the value it stands for. */
body #scp-primary .scp-aff-bars {
position: relative;
border-top: 1px dashed var(--scp-aff-line, #e3e9e8);
padding-top: 14px;
}
body #scp-primary .scp-aff-bars-max {
position: absolute;
top: -9px;
left: 0;
padding-right: 6px;
background: var(--scp-aff-surface, #ffffff);
font-size: 11px;
font-weight: 700;
color: var(--scp-aff-muted, #707070);
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* The total is the one figure worth repeating under the plot, and it says what
it counts rather than leaving the reader to infer it. */
body #scp-primary .scp-aff-bars-total {
font-weight: 600;
color: #000;
}
/* ---------------------------------------------------------------------------
Desktop: the section nav becomes a left rail.
Six sections in a row across the top spends the full width of the page on
navigation and pushes the content the reader came for below the fold. On a
wide screen there is room beside it, so the rail goes left and the panel
keeps its own vertical space.
1300px, not a smaller breakpoint: the rail takes 230 of the width, and the
tables inside these panels (Recent Traffic runs to eight columns) need what
is left. Below it the segmented control above still applies unchanged, so a
tablet and a phone keep the horizontal row.
--------------------------------------------------------------------------- */
@media (min-width: 1300px) {
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 22px;
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar {
flex: 0 0 auto;
width: var(--scp-aff-menu-sidebar-width, 230px);
flex-direction: column;
flex-wrap: nowrap;
overflow: visible;
gap: 2px;
padding: 6px;
margin-bottom: 0;
/* Follows the reader down a long Traffic table rather than scrolling away
and making them go back up to change section. */
position: sticky;
top: 24px;
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item {
width: 100%;
justify-content: flex-start;
padding: 10px 12px;
white-space: normal;
}
/* The panel takes the rest, and min-width:0 is what stops a wide table
forcing the flex item past its share and pushing the rail off screen. */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-main-content {
flex: 1 1 auto;
min-width: 0;
padding-top: 0;
}
}
/* The rail as a full-height panel beside the content.
Stretching it to the panel's height and sticky positioning are mutually
exclusive -- a rail that is already as tall as what it sits beside has
nothing left to stick to -- so sticky comes back off. On a white surface the
sunken-track trick is no longer doing the work either: the active item now
reads against white, the way a sidebar normally works. */
@media (min-width: 1300px) {
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container {
align-items: stretch;
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar {
position: static;
top: auto;
align-self: stretch;
background: var(--scp-aff-surface, #ffffff);
border: 1px solid var(--scp-aff-line, #e3e9e8);
/* Items sit at the top of the rail; the rest is the height it is
matching, not space to distribute them into. */
justify-content: flex-start;
padding: 10px;
gap: 3px;
}
/* Against white the inactive items can carry a little more ink -- there is
no track for them to recede into any more. */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item {
opacity: .72;
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item:hover {
opacity: 1;
background: var(--scp-aff-sunken, #f4f8f7);
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item.active {
opacity: 1;
box-shadow: none;
}
/* A hairline between the items.
Drawn in the gap rather than as a border on the item, so the hover and
active fills keep their rounded edges and never sit flush against the
line. The gap widens to 7px to give it that room.
Mixed from the creator's own menu ink, like the hover fill above, so it
lands at the right weight whatever hue they set -- a fixed grey would
disappear on a dark rail and shout on a pale one. Inset 6px at each end
so it reads as a separator between rows, not a rule cutting the rail. */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar {
gap: 7px;
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item {
position: relative;
}
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item + a.scp-aff-nav-item::before {
content: "";
position: absolute;
top: -4px;
left: 6px;
right: 6px;
height: 1px;
background: color-mix(in srgb, var(--scp-aff-verical-menu-text, #000) 14%, transparent);
pointer-events: none;
}
/* A divider on both sides of the selected item turns its fill into a boxed
row -- two rules and a block between them, which reads as a frame rather
than a selection. The lines that touch it are dropped, so the pill sits
in clear space and is the only thing marked on the rail.
Each line belongs to the item below it, so the selected item drops its
own and the adjacent sibling after it drops the other. */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item.active::before,
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item.active + a.scp-aff-nav-item::before {
display: none;
}
/* Nothing is drawn down the leading edge: against a solid fill a marker in
the active ink is a line on a filled row, which is noise. The fill and
its radius carry the selection on their own. */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item.active {
box-shadow: none;
}
}
/* ===========================================================================
Narrow screens.
The desktop rules put the filters in a right-aligned row and the metrics in
three equal columns. Both are correct at width and wrong without it: the
filter row wraps and each fragment stays right-aligned, so the fields land
ragged against nothing, and three tiles share 390px as 111px each -- not
enough for a 26px figure, a label and an icon.
=========================================================================== */
@media (max-width: 900px) {
/* A grid, so the fields line up on both axes instead of wrapping into
right-aligned fragments. The earnings select takes the full row: it
filters what the dates then narrow, so it reads first. */
body #scp-primary .scp-aff-date-range-main-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
justify-content: stretch;
width: 100%;
}
body #scp-primary .scp-aff-date-range-main-wrapper > #selectedValue,
body #scp-primary .scp-aff-col-select-box-wrapper {
grid-column: 1 / -1;
}
body #scp-primary .scp-aff-date-range-main-wrapper .date-input-group { min-width: 0; }
body #scp-primary .scp-aff-date-range-main-wrapper .date-input,
body #scp-primary .scp-aff-date-range-main-wrapper select#scp-aff-earning-filter {
width: 100%;
}
/* That label is a non-breaking space, there only to hold the select level
with the dated fields on one row. Stacked, it is a blank line. */
body #scp-primary .scp-aff-col-select-box-wrapper .filter-label { display: none; }
body #scp-primary .scp-aff-col-right.scp-with-datefilter { width: 100%; }
}
@media (max-width: 680px) {
/* Three figures across a phone leaves each of them 111px. Stacked, each
keeps the width its number was set at. */
body #scp-primary .scp-aff-stats-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
body #scp-primary .scp-aff-stats-grid .scp-dashboard-metric.scp-card {
width: 100%;
flex: 1 1 auto;
}
/* 22px of padding either side takes 44 of 390. */
body #scp-primary .scp-aff-card { padding: 16px; }
body #scp-primary .scp-aff-cardhead { gap: 11px; }
body #scp-primary .scp-aff-cardhead-icon { width: 32px; height: 32px; border-radius: 9px; }
/* The hero's rule is a grid column on desktop; stacked it has to become a
row or it keeps a column's full height in a one-column layout. */
body #scp-primary .scp-aff-hero { padding: 16px; }
body #scp-primary .scp-aff-hero-meta { gap: 18px; }
/* Terms and Policy stop trying to share a line at 240px each. */
body #scp-primary .scp-aff-doclist { grid-template-columns: minmax(0, 1fr); }
}
/* ---------------------------------------------------------------------------
The filter rules above lose to an older pair further up this file that reach
the same element through .scp-aff-col-right.scp-with-datefilter -- (1,3,1)
against (1,1,1). Restated at that specificity so they actually apply, rather
than left looking correct in the source and doing nothing on the page.
--------------------------------------------------------------------------- */
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: flex-end;
gap: 8px;
background: none;
border: 0;
padding: 0;
width: auto;
}
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper .date-input {
height: 40px;
max-width: none;
width: 132px;
padding: 0 12px;
border: 1px solid var(--scp-aff-line-strong, #d3dedd);
border-radius: var(--scp-aff-radius, 8px);
font-weight: 400;
font-size: 13.5px;
}
@media (max-width: 900px) {
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
justify-content: stretch;
width: 100%;
margin-top: 0;
}
/* The group is the grid item; sizing only the input inside it left the
field at its own 140px while the column around it was full width. */
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper .date-input-group {
width: 100%;
min-width: 0;
}
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper .date-input {
width: 100%;
max-width: none;
}
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper > #selectedValue {
grid-column: 1 / -1;
}
}
@media (max-width: 680px) {
/* Start and End stay side by side all the way down. They are a pair -- a
range is read across, not down -- and "2026-08-12" is short enough that
two of them still fit a 390px screen. Only the gap tightens. */
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 10px;
}
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper .date-input {
padding: 0 8px;
font-size: 13px;
}
}
/* ---------------------------------------------------------------------------
The stacked table.
Below 768px the rows become cards and each cell carries its column name --
that layout already existed. My desktop cell rules reach it at (1,2,2)
against its (1,2,1), so they were applying 15px/14px of cell padding inside
a row that is already a padded card, and holding Date and Lead to nowrap in
a layout whose whole point is that values wrap.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
body #scp-primary .scp-aff-card .scp-aff-table td,
body #scp-primary .scp-aff-main-content .scp-aff-table td {
padding: 9px 0;
white-space: normal;
width: auto;
}
body #scp-primary .scp-aff-card .scp-aff-table td[data-label="Date"],
body #scp-primary .scp-aff-card .scp-aff-table td[data-label="Lead"],
body #scp-primary .scp-aff-card .scp-aff-table td[data-label="Status"] {
white-space: normal;
width: auto;
}
/* The row card supplies the edge; the last cell does not need a rule under it. */
body #scp-primary .scp-aff-card .scp-aff-table tbody tr {
border: 1px solid var(--scp-aff-line, #e3e9e8);
border-radius: var(--scp-aff-radius, 8px);
padding: 4px 14px;
margin-bottom: 10px;
}
body #scp-primary .scp-aff-card .scp-aff-table tbody tr:hover { background: none; }
/* A destination path is the one value that cannot wrap sensibly, so it
scrolls inside its own cell rather than breaking mid-slug. */
body #scp-primary .scp-aff-table .scp-aff-dest { max-width: 60%; }
body #scp-primary .scp-aff-table .scp-aff-ref { max-width: 60%; }
}
@media (max-width: 900px) {
/* Inherited centring put "Start Date" in the middle of its own field. A
field label belongs at the edge the field starts from. */
body #scp-primary .scp-aff-col-right.scp-with-datefilter .date-input-group,
body #scp-primary .scp-aff-col-right.scp-with-datefilter .filter-label {
text-align: left;
}
}
@media (max-width: 680px) {
/* The row wraps instead of scrolling.
Measured at 390px: the six sections need 2022px of track inside a 344px
box, so five of them sat off-screen behind a scrollbar that a touch
device does not draw -- nothing on screen said they were there. Wrapping
costs two rows and makes every section visible, which is the trade worth
making on a phone. */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar {
flex-wrap: wrap;
overflow-x: visible;
row-gap: 4px;
}
/* Two to a row. flex:1 1 auto let the longest label claim a row of its own,
which turned six sections into six rows and 236px of navigation before
the page even started. A half-width basis gives three rows instead. */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item {
flex: 1 1 calc(50% - 6px);
min-width: 0;
justify-content: flex-start;
padding: 9px 10px;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* An older rule inside the 768px block gives every nav item min-width:50%, so
two of them plus a gap exceed the row and each takes a line of its own --
six sections became six rows. Cleared, so wrapping can actually pack them. */
@media (max-width: 1299px) {
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item {
min-width: 0;
/* Width is stated rather than left to inherit. Something further up still
resolves these to the full row -- forcing width:auto inline collapses an
item from 711px to its natural 111px -- so the horizontal nav says what
it wants instead of depending on nothing else claiming the width. */
width: auto;
flex: 0 1 auto;
}
}
@media (max-width: 680px) {
/* Below this a half-width basis is right: two to a row, evenly. */
body #scp-primary [class*="scp-dashboard-wrapper"] .scp-aff-container nav.scp-aff-sidebar a.scp-aff-nav-item {
flex: 1 1 calc(50% - 6px);
}
}
/* With the rail taking 250px the panel has ~890 left, and the heading, the
select and the two dated fields all want a share of it. Stacking the filters
under the heading fitted, but it reads as two separate controls and costs a
whole row of height. With the labels inline (below) the filters need ~585px,
so they sit beside the heading and the subtitle wraps into what is left --
a wrapped subtitle costs nothing, a second row costs the alignment. */
@media (min-width: 1300px) {
body #scp-primary .scp-aff-page-header.scp-row-flex {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 14px;
}
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper {
justify-content: flex-end;
}
}
/* ===========================================================================
The no-access screens: pending, awaiting review, rejected.
These replace the whole affiliate shell -- no nav, no panels -- so for a
member who is not an approved affiliate this card IS the affiliate area.
It was built on a green "success" box and then patched per state further
down the file, which left several things fighting:
- every state, rejection included, inherited a green success palette and
a green-tinted shadow;
- the per-state colours at :472-496 are hard-coded hex with no variables,
and they override the themable --scp-aff-empty-box-* ones at :306, so
a creator's configured reject colour was dead;
- two reject reds that never matched, #fff8f8 against #fff6f6;
- display headings at 30/29/26px inside a card, on no scale;
- a lock icon pulsing on an infinite loop with no reduced-motion guard.
One card, three states, colour by state only where the state means
something. Same surface and type as every other card in this redesign.
=========================================================================== */
body #scp-primary .scp-aff-msg-container {
max-width: 620px;
margin: 32px auto;
padding: 0;
}
body #scp-primary .scp-aff-msg-success {
text-align: center;
background: var(--scp-aff-surface, #ffffff);
border: 1px solid var(--scp-aff-line, #e3e9e8);
border-radius: var(--scp-aff-radius-lg, 12px);
box-shadow: 0 1px 2px rgba(16, 32, 31, .04), 0 12px 32px -24px rgba(16, 32, 31, .4);
padding: 34px 30px;
overflow: visible;
}
/* The icon carries the state. It is the only thing here that needs colour, so
it is the only thing that takes it -- the card stays neutral underneath. */
body #scp-primary .scp-aff-msg-icon {
width: 46px;
height: 46px;
border-radius: 14px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
animation: none;
background: var(--scp-aff-sunken, #f4f8f7);
}
body #scp-primary .scp-aff-msg-icon svg { width: 22px; height: 22px; }
body #scp-primary .scp-aff-msg-success.scp-pending .scp-aff-msg-icon {
background: #fdf1dc; color: #8a5c11;
}
body #scp-primary .scp-aff-msg-success.scp-pending-approval .scp-aff-msg-icon {
background: color-mix(in srgb, var(--scp-aff-primary-bg, #00ccc8) 14%, #fff);
color: var(--scp-aff-primary-bg, #00ccc8);
}
body #scp-primary .scp-aff-msg-success.scp-reject .scp-aff-msg-icon,
body #scp-primary .scp-aff-msg-success.scp-aff-msg-rejected .scp-aff-msg-icon {
background: #fdeae2; color: #9a3412;
}
/* A hairline in the state's colour along the top, instead of tinting the whole
card. Enough to tell the three apart at a glance; quiet enough to read. */
body #scp-primary .scp-aff-msg-success.scp-pending { border-top: 3px solid #d19a3c; }
body #scp-primary .scp-aff-msg-success.scp-pending-approval { border-top: 3px solid var(--scp-aff-primary-bg, #00ccc8); }
body #scp-primary .scp-aff-msg-success.scp-reject,
body #scp-primary .scp-aff-msg-success.scp-aff-msg-rejected { border-top: 3px solid #c7492f; }
/* The message body is admin-written HTML, so every level has to land somewhere
sensible rather than only the one the shipped copy happens to use. */
body #scp-primary .scp-aff-msg-success h1,
body #scp-primary .scp-aff-msg-success h2,
body #scp-primary .scp-aff-msg-success h3,
body #scp-primary .scp-aff-msg-success h4,
body #scp-primary .scp-aff-msg-success h5,
body #scp-primary .scp-aff-msg-success h6 {
font-size: 19px;
font-weight: 700;
color: #000000;
letter-spacing: -.015em;
line-height: 1.3;
margin: 0 0 8px;
text-align: center;
}
body #scp-primary .scp-aff-msg-success,
body #scp-primary .scp-aff-msg-success p {
font-size: 14px;
line-height: 1.6;
color: var(--scp-aff-muted, #707070);
text-align: center;
}
body #scp-primary .scp-aff-msg-success p { margin: 0 0 12px; }
body #scp-primary .scp-aff-msg-success p:last-child { margin-bottom: 0; }
/* Sized to itself, not pinned to 450px and then stretched to fill it. */
body #scp-primary .scp-aff-btn-msg { margin-top: 22px; text-align: center; }
body #scp-primary .scp-aff-btn-msg button.scp-request-approval-btn.scp-btn {
width: auto;
max-width: 100%;
padding: 11px 22px;
font-size: 13.5px;
font-weight: 600;
border-radius: var(--scp-aff-radius, 8px);
background: var(--scp-aff-primary-bg, #00ccc8);
color: var(--scp-aff-primary-text-color, #ffffff);
border: 0;
}
/* The lock pulsed forever. Kept off entirely -- it is not a loading state, and
an animation that never resolves is just movement. */
@media (prefers-reduced-motion: reduce) {
body #scp-primary .scp-aff-msg-icon { animation: none !important; }
}
@media (max-width: 680px) {
body #scp-primary .scp-aff-msg-container { margin: 20px auto; padding: 0 4px; }
body #scp-primary .scp-aff-msg-success { padding: 26px 20px; }
}
/* ---------------------------------------------------------------------------
State colour, entirely from creator variables.
The rules further up reach this card as `.scp-aff-msg-success.scp-pending` --
two classes -- while the neutral-card rules above use one, so they lost and
the hard-coded amber fill survived: an amber card, amber body text, and a
lock in a pale chip that all but disappeared. Restated with the state class
so the treatment applies, and sourced from the same three status variables
the table badges already use, so this card matches the rest of the UI and
follows whatever a creator sets.
pending -> --scp-aff-status-pending-* (not applied yet)
pending-approval -> --scp-aff-primary-* (with us, in progress)
reject -> a fixed red (see note below)
Rejection is the one exception, and deliberately so. There is no red in the
affiliate palette and adding a setting for one was rejected as scope, so it is
a fixed #c7492f. Red is the only colour that reads as "declined" regardless of
what else a creator has configured, and getting that wrong on this particular
screen costs more than the inconsistency.
--------------------------------------------------------------------------- */
body #scp-primary .scp-aff-msg-success.scp-pending,
body #scp-primary .scp-aff-msg-success.scp-pending-approval,
body #scp-primary .scp-aff-msg-success.scp-reject,
body #scp-primary .scp-aff-msg-success.scp-aff-msg-rejected {
background: var(--scp-aff-surface, #ffffff);
border: 1px solid var(--scp-aff-line, #e3e9e8);
box-shadow: 0 1px 2px rgba(16, 32, 31, .04), 0 12px 32px -24px rgba(16, 32, 31, .4);
color: var(--scp-aff-muted, #707070);
}
/* A band along the top in the state's own colour: enough to tell the three
apart, without tinting the surface the message has to be read on. */
body #scp-primary .scp-aff-msg-success.scp-pending {
border-top: 3px solid var(--scp-aff-status-pending-text, #856404);
}
body #scp-primary .scp-aff-msg-success.scp-pending-approval {
border-top: 3px solid var(--scp-aff-primary-bg, #00ccc8);
}
body #scp-primary .scp-aff-msg-success.scp-reject,
body #scp-primary .scp-aff-msg-success.scp-aff-msg-rejected {
border-top: 3px solid #c7492f;
}
/* The icon is the one element carrying the state, so it takes the state's fill
and its ink -- the pair is designed to be legible together. */
body #scp-primary .scp-aff-msg-success.scp-pending .scp-aff-msg-icon {
background: var(--scp-aff-status-pending-bg, #fff3cd);
color: var(--scp-aff-status-pending-text, #856404);
}
body #scp-primary .scp-aff-msg-success.scp-pending-approval .scp-aff-msg-icon {
background: var(--scp-aff-primary-bg, #00ccc8);
color: var(--scp-aff-primary-text-color, #ffffff);
}
body #scp-primary .scp-aff-msg-success.scp-reject .scp-aff-msg-icon,
body #scp-primary .scp-aff-msg-success.scp-aff-msg-rejected .scp-aff-msg-icon {
background: #fdeae2;
color: #c7492f;
}
/* currentColor, so the glyph follows whatever ink the state supplies rather
than being pinned white against a fill that might be pale. */
body #scp-primary .scp-aff-msg-success .scp-aff-msg-icon svg { color: inherit; }
/* The heading is the creator's own text colour where they have set one. */
body #scp-primary .scp-aff-msg-success.scp-pending h1,
body #scp-primary .scp-aff-msg-success.scp-pending h2,
body #scp-primary .scp-aff-msg-success.scp-pending h3,
body #scp-primary .scp-aff-msg-success.scp-pending-approval h1,
body #scp-primary .scp-aff-msg-success.scp-pending-approval h2,
body #scp-primary .scp-aff-msg-success.scp-pending-approval h3,
body #scp-primary .scp-aff-msg-success.scp-reject h1,
body #scp-primary .scp-aff-msg-success.scp-reject h2,
body #scp-primary .scp-aff-msg-success.scp-reject h3,
body #scp-primary .scp-aff-msg-success.scp-aff-msg-rejected h3 {
color: var(--sucess-box-text-color, #000000);
}
body #scp-primary .scp-aff-msg-success.scp-pending p,
body #scp-primary .scp-aff-msg-success.scp-pending-approval p,
body #scp-primary .scp-aff-msg-success.scp-reject p {
color: var(--scp-aff-muted, #707070);
}
/* Rejection is reached by a three-class selector further up
(.scp-aff-msg-success.scp-aff-msg-rejected.scp-reject), which outranks the
two-class rules above, so the hard-coded pink fill and red border survived on
that one state. Matched here, from the same cancelled variables as the rest. */
body #scp-primary .scp-aff-msg-success.scp-aff-msg-rejected.scp-reject {
background: var(--scp-aff-surface, #ffffff);
border: 1px solid var(--scp-aff-line, #e3e9e8);
border-top: 3px solid #c7492f;
color: var(--scp-aff-muted, #707070);
}
body #scp-primary .scp-aff-msg-success.scp-aff-msg-rejected.scp-reject .scp-aff-msg-icon {
background: #fdeae2;
color: #c7492f;
}
body #scp-primary .scp-aff-msg-success.scp-aff-msg-rejected.scp-reject h3 {
color: var(--sucess-box-text-color, #000000);
}
body #scp-primary .scp-aff-msg-success.scp-aff-msg-rejected.scp-reject p {
color: var(--scp-aff-muted, #707070);
}
/* The filter row beside the heading, from 901px up.
Each label sits above its own field and starts at the field's left edge --
.date-input-group centred them at :441, which left "Start Date" floating in
the middle of its column instead of marking where the field begins.
With the labels stacked the column is ~450px wide and two lines tall, which
is the same height as the heading and its subtitle, so the whole header sits
on one row instead of the filters dropping underneath it.
The group carries width:140px from when it was the only thing in the column.
It sizes to its field now, so a field wide enough to show its own value is
not clipped behind the calendar icon. */
@media (min-width: 901px) {
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper .date-input-group {
width: auto;
text-align: left;
}
/* :436 pulls this block 15px up, which is what used to lift a label-less
filter row level with the heading beside it. With the labels back the
negative margin lifts them clear out of the header box and they overlap
whatever sits above. The row aligns on its own bottom edge instead. */
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-col-row-multi {
margin-top: 0;
align-items: flex-end;
}
body #scp-primary .scp-aff-col-right.scp-with-datefilter .filter-label {
display: block;
margin: 0 0 6px;
text-align: left;
white-space: nowrap;
font-size: 12.5px;
font-weight: 700;
color: var(--scp-aff-muted, #707070);
}
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper {
align-items: flex-end;
justify-content: flex-end;
gap: 14px;
flex-wrap: nowrap;
}
body #scp-primary .scp-aff-col-right.scp-with-datefilter .scp-aff-date-range-main-wrapper .date-input {
width: 136px;
min-width: 136px;
max-width: none;
}
/* :438 reserves 550px for the filter column, from when it owned a whole
row. Beside the heading it takes the width it actually needs and the
heading keeps the rest. */
body #scp-primary .scp-aff-page-header.scp-row-flex .scp-aff-col-right.scp-with-datefilter {
flex: 0 0 auto;
min-width: 0;
}
body #scp-primary .scp-aff-page-header.scp-row-flex .scp-aff-col-left {
min-width: 0;
flex: 1 1 auto;
}
}