/* =========================================================
   Affiliate Tracker
   File: /templates/teachthis/css/affiliate-tracker.css
   Scope: Affiliate Tracker component only
   ========================================================= */


/* =========================================================
   Base scope
   ========================================================= */

body.com_affiliatetracker #sp-component {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: #0f172a !important;
}

body.com_affiliatetracker #sp-component *,
body.com_affiliatetracker #sp-component *::before,
body.com_affiliatetracker #sp-component *::after {
    box-sizing: border-box !important;
}


/* =========================================================
   Page header / Affiliate Area title
   Designed to match the existing green page header style
   without using the fake extra icon/circle.
   ========================================================= */

body.com_affiliatetracker #sp-component .page-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    margin: 0 0 18px 0 !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 0 14px 14px 0 !important;
    background: linear-gradient(90deg, #48d83b 0%, #2f9fce 100%) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.com_affiliatetracker #sp-component .page-header::before,
body.com_affiliatetracker #sp-component .page-header::after {
    display: none !important;
    content: none !important;
}

body.com_affiliatetracker #sp-component .page-header h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}


/* =========================================================
   Affiliate tabs
   ========================================================= */

body.com_affiliatetracker #sp-component .nav.nav-tabs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 0 14px 0 !important;
    padding: 8px 10px !important;
    min-height: 42px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

body.com_affiliatetracker #sp-component .nav.nav-tabs .nav-item {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

body.com_affiliatetracker #sp-component .nav.nav-tabs .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #2f98bd !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.16s ease, color 0.16s ease !important;
}

body.com_affiliatetracker #sp-component .nav.nav-tabs .nav-link.active {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 13px !important;
    background: #78bf45 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

body.com_affiliatetracker #sp-component .nav.nav-tabs .nav-link:hover,
body.com_affiliatetracker #sp-component .nav.nav-tabs .nav-link:focus {
    background: #eaf6fb !important;
    color: #247fa1 !important;
    box-shadow: none !important;
    transform: none !important;
}

body.com_affiliatetracker #sp-component .nav.nav-tabs .nav-link.active:hover,
body.com_affiliatetracker #sp-component .nav.nav-tabs .nav-link.active:focus {
    background: #78bf45 !important;
    color: #ffffff !important;
}


/* =========================================================
   Main admin form panel
   Includes filters and general form area
   ========================================================= */

body.com_affiliatetracker #sp-component form#adminForm {
    margin: 0 !important;
    padding: 0 !important;
}

body.com_affiliatetracker #sp-component form#adminForm > .d-flex,
body.com_affiliatetracker #sp-component form#adminForm > .filters,
body.com_affiliatetracker #sp-component form#adminForm > .filter-search,
body.com_affiliatetracker #sp-component form#adminForm > .filter-results {
    margin-bottom: 14px !important;
}

body.com_affiliatetracker #sp-component form#adminForm > div:not(.mt-3):not(.table_scrolls):not(.center):not(.time-options):empty {
    display: none !important;
}


/* Filter panel */
body.com_affiliatetracker #sp-component form#adminForm > .d-flex.mb-3,
body.com_affiliatetracker #sp-component form#adminForm > .well,
body.com_affiliatetracker #sp-component form#adminForm > .filter-panel {
    padding: 18px 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
}


/* If the filters are simply loose form controls, this still keeps them tidy */
body.com_affiliatetracker #sp-component form#adminForm input,
body.com_affiliatetracker #sp-component form#adminForm select,
body.com_affiliatetracker #sp-component form#adminForm textarea,
body.com_affiliatetracker #sp-component form#adminForm button {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}


/* =========================================================
   Date inputs and calendar buttons
   ========================================================= */

body.com_affiliatetracker #sp-component form#adminForm .field-calendar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 10px 14px 0 !important;
    vertical-align: middle !important;
}

body.com_affiliatetracker #sp-component form#adminForm .field-calendar input {
    width: 180px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    border: 1px solid #dce2ea !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 13px !important;
    line-height: 34px !important;
    box-shadow: none !important;
}

body.com_affiliatetracker #sp-component form#adminForm .field-calendar input::placeholder {
    color: #9ca3af !important;
}

body.com_affiliatetracker #sp-component form#adminForm .field-calendar button,
body.com_affiliatetracker #sp-component form#adminForm .field-calendar .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #e9eef5 !important;
    color: #334155 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
}

body.com_affiliatetracker #sp-component form#adminForm .field-calendar button:hover,
body.com_affiliatetracker #sp-component form#adminForm .field-calendar .btn:hover {
    background: #dfe7f1 !important;
    color: #0f172a !important;
    box-shadow: none !important;
    transform: none !important;
}


/* =========================================================
   Select boxes
   Extra right padding keeps native arrow away from edge
   ========================================================= */

body.com_affiliatetracker #sp-component form#adminForm select,
body.com_affiliatetracker #sp-component form#adminForm select.form-control {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 0 14px 0 !important;
    padding: 0 40px 0 12px !important;
    border: 1px solid #dce2ea !important;
    border-radius: 7px !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    font-size: 13px !important;
    line-height: 34px !important;
    box-shadow: none !important;
    outline: none !important;
}

body.com_affiliatetracker #sp-component form#adminForm select:focus,
body.com_affiliatetracker #sp-component form#adminForm select.form-control:focus,
body.com_affiliatetracker #sp-component form#adminForm input:focus {
    border-color: #9ccfe2 !important;
    box-shadow: 0 0 0 3px rgba(47, 159, 206, 0.12) !important;
    outline: none !important;
}


/* =========================================================
   Filter Results button
   ========================================================= */

body.com_affiliatetracker #sp-component form#adminForm button[type="submit"],
body.com_affiliatetracker #sp-component form#adminForm .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #2f9fce !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.16s ease, color 0.16s ease !important;
}

body.com_affiliatetracker #sp-component form#adminForm button[type="submit"] i,
body.com_affiliatetracker #sp-component form#adminForm .btn-primary i,
body.com_affiliatetracker #sp-component form#adminForm button[type="submit"] .fa,
body.com_affiliatetracker #sp-component form#adminForm .btn-primary .fa,
body.com_affiliatetracker #sp-component form#adminForm button[type="submit"] .icon-search,
body.com_affiliatetracker #sp-component form#adminForm .btn-primary .icon-search {
    margin-right: 5px !important;
}

body.com_affiliatetracker #sp-component form#adminForm button[type="submit"]:hover,
body.com_affiliatetracker #sp-component form#adminForm .btn-primary:hover,
body.com_affiliatetracker #sp-component form#adminForm button[type="submit"]:focus,
body.com_affiliatetracker #sp-component form#adminForm .btn-primary:focus {
    background: #278cb6 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}


/* =========================================================
   Time range dropdown: Last 30 days
   ========================================================= */

body.com_affiliatetracker #sp-component form#adminForm .time-options {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 16px 0 10px 0 !important;
}

body.com_affiliatetracker #sp-component form#adminForm .time-options .btn,
body.com_affiliatetracker #sp-component form#adminForm .time-options button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #eef2f7 !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
}

body.com_affiliatetracker #sp-component form#adminForm .time-options .btn:hover,
body.com_affiliatetracker #sp-component form#adminForm .time-options button:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: none !important;
    transform: none !important;
}

body.com_affiliatetracker #sp-component form#adminForm .time-options .dropdown-menu {
    border: 1px solid #e2e8f0 !important;
    border-radius: 9px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
}


/* =========================================================
   Totals / dashboard cards
   Handles Conversions, Referrals, Commission cards
   ========================================================= */

body.com_affiliatetracker #sp-component form#adminForm > .mt-3 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin: 10px 4px 12px 4px !important;
}

body.com_affiliatetracker #sp-component .at_totals,
body.com_affiliatetracker #sp-component .resume-number,
body.com_affiliatetracker #sp-component .dashboard-box,
body.com_affiliatetracker #sp-component .card-at,
body.com_affiliatetracker #sp-component .card.border-0.h-100.shadow-sm.dashboard-box {
    min-height: 65px !important;
    padding: 14px 16px !important;
    border: 1px solid #dbeafe !important;
    border-radius: 9px !important;
    background: #e8f7fd !important;
    color: #0f172a !important;
    box-shadow: none !important;
}

body.com_affiliatetracker #sp-component form#adminForm > .mt-3 > div:nth-child(2) .at_totals,
body.com_affiliatetracker #sp-component form#adminForm > .mt-3 > div:nth-child(2) .resume-number,
body.com_affiliatetracker #sp-component form#adminForm > .mt-3 > div:nth-child(2) .dashboard-box,
body.com_affiliatetracker #sp-component form#adminForm > .mt-3 > div:nth-child(2) .card-at,
body.com_affiliatetracker #sp-component form#adminForm > .mt-3 > div:nth-child(2) .card.border-0.h-100.shadow-sm.dashboard-box {
    border-color: #d9f2cf !important;
    background: #eaf8e3 !important;
}

body.com_affiliatetracker #sp-component .item-label,
body.com_affiliatetracker #sp-component .at_totals .title,
body.com_affiliatetracker #sp-component .resume-number .title,
body.com_affiliatetracker #sp-component .dashboard-box .title,
body.com_affiliatetracker #sp-component .dashboard-box h3,
body.com_affiliatetracker #sp-component .dashboard-box h4 {
    margin: 0 0 5px 0 !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

body.com_affiliatetracker #sp-component .item-total,
body.com_affiliatetracker #sp-component .big_number,
body.com_affiliatetracker #sp-component .resume-number .number,
body.com_affiliatetracker #sp-component .dashboard-box .number {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}


/* =========================================================
   Tables
   Avoids Joomla calendar tables by only targeting component
   result tables inside adminForm/table_scrolls.
   ========================================================= */

body.com_affiliatetracker #sp-component form#adminForm > .table_scrolls {
    width: 100% !important;
    margin: 12px 0 0 0 !important;
    overflow-x: auto !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    -webkit-overflow-scrolling: touch !important;
}

body.com_affiliatetracker #sp-component form#adminForm > .table_scrolls table,
body.com_affiliatetracker #sp-component form#adminForm > table.table,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

body.com_affiliatetracker #sp-component form#adminForm > .table_scrolls table thead th,
body.com_affiliatetracker #sp-component form#adminForm > table.table thead th,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped thead th {
    padding: 11px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f8fafc !important;
    color: #2f98bd !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

body.com_affiliatetracker #sp-component form#adminForm > .table_scrolls table tbody td,
body.com_affiliatetracker #sp-component form#adminForm > table.table tbody td,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped tbody td,
body.com_affiliatetracker #sp-component form#adminForm > .table_scrolls table tfoot td,
body.com_affiliatetracker #sp-component form#adminForm > table.table tfoot td,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped tfoot td {
    padding: 11px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped tbody tr:nth-child(odd) td,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped tbody tr:nth-child(even) td {
    background: #ffffff !important;
}

body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped tbody tr:hover td {
    background: #fbfdff !important;
}

body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped tfoot tr.totals td,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped tfoot td {
    background: #ffffff !important;
    font-weight: 500 !important;
}

body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped th a,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped th a:visited,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped td a,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped td a:visited {
    color: #2f98bd !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped th a:hover,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped td a:hover {
    color: #247fa1 !important;
    text-decoration: underline !important;
}


/* Right-aligned money/value columns */
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped th.text-right,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped td.text-right,
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped th:nth-last-child(1),
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped td:nth-last-child(1),
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped th:nth-last-child(2),
body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped td:nth-last-child(2) {
    text-align: right !important;
}


/* =========================================================
   Status badges
   ========================================================= */

body.com_affiliatetracker #sp-component .badge,
body.com_affiliatetracker #sp-component .label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #e8f7e3 !important;
    color: #287a26 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}


/* =========================================================
   Request new affiliate link button / centered CTA
   ========================================================= */

body.com_affiliatetracker #sp-component form#adminForm > .center {
    display: flex !important;
    justify-content: center !important;
    margin: 18px 0 0 0 !important;
    text-align: center !important;
}

body.com_affiliatetracker #sp-component form#adminForm > .center a,
body.com_affiliatetracker #sp-component form#adminForm > .center .btn,
body.com_affiliatetracker #sp-component form#adminForm a.btn-success,
body.com_affiliatetracker #sp-component form#adminForm .btn-success {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #78bf45 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
}

body.com_affiliatetracker #sp-component form#adminForm > .center a:hover,
body.com_affiliatetracker #sp-component form#adminForm > .center .btn:hover,
body.com_affiliatetracker #sp-component form#adminForm a.btn-success:hover,
body.com_affiliatetracker #sp-component form#adminForm .btn-success:hover {
    background: #68aa39 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

/* =========================================================
   Joomla calendar popup
   Minimal styling only — preserve Joomla layout
   ========================================================= */

body.com_affiliatetracker .calendar-container .js-calendar,
body.com_affiliatetracker .field-calendar .js-calendar,
body.com_affiliatetracker .js-calendar {
    border-radius: 10px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

/* Preserve Joomla's calendar table layout */
body.com_affiliatetracker .js-calendar table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Year/month title rows */
body.com_affiliatetracker .js-calendar .calendar-head-row td,
body.com_affiliatetracker .js-calendar .calendar-head-row .title {
    color: #111827 !important;
    font-weight: 500 !important;
}

/* Calendar arrow controls */
body.com_affiliatetracker .js-calendar .calendar-head-row .button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #2f9fce !important;
}

/* Day names: wk Sun Mon Tue etc. */
body.com_affiliatetracker .js-calendar tr.daynames td,
body.com_affiliatetracker .js-calendar td.day-name {
    color: #111827 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: #ffffff !important;
}

/* Week number column */
body.com_affiliatetracker .js-calendar tbody td.week {
    color: #111827 !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    background: #f1f5f9 !important;
}

/* All date numbers: keep them consistent, no confusing grey/dark mix */
body.com_affiliatetracker .js-calendar tbody td.day,
body.com_affiliatetracker .js-calendar tbody td.weekend,
body.com_affiliatetracker .js-calendar tbody td.today,
body.com_affiliatetracker .js-calendar tbody td.othermonth,
body.com_affiliatetracker .js-calendar tbody td.emptycell,
body.com_affiliatetracker .js-calendar tbody td.disabled {
    color: #111827 !important;
    font-size: 17px !important;
    font-weight: 400 !important;
}

/* Selected day */
body.com_affiliatetracker .js-calendar tbody td.selected {
    background: #2f82c4 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Selected day inner elements, if Joomla wraps the number */
body.com_affiliatetracker .js-calendar tbody td.selected div,
body.com_affiliatetracker .js-calendar tbody td.selected span {
    color: #ffffff !important;
}

/* Today, only slightly emphasized */
body.com_affiliatetracker .js-calendar tbody td.today:not(.selected) {
    color: #2f9fce !important;
    font-weight: 700 !important;
}

/* Hover day */
body.com_affiliatetracker .js-calendar tbody td.day:hover,
body.com_affiliatetracker .js-calendar tbody td.weekend:hover,
body.com_affiliatetracker .js-calendar tbody td.today:hover {
    background: #eef7fb !important;
    color: #111827 !important;
}

/* Footer button row */
body.com_affiliatetracker .js-calendar .buttons-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px 10px 10px !important;
    background: #ffffff !important;
}

/* Clear / Today / Close as plain blue links */
body.com_affiliatetracker .js-calendar button.js-btn.btn.btn-clear,
body.com_affiliatetracker .js-calendar button.js-btn.btn.btn-today,
body.com_affiliatetracker .js-calendar button.js-btn.btn.btn-close {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #2f9fce !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Blue link hover */
body.com_affiliatetracker .js-calendar button.js-btn.btn.btn-clear:hover,
body.com_affiliatetracker .js-calendar button.js-btn.btn.btn-today:hover,
body.com_affiliatetracker .js-calendar button.js-btn.btn.btn-close:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #247fa1 !important;
    text-decoration: underline !important;
    box-shadow: none !important;
    transform: none !important;
}


/* =========================================================
   Utility classes used by Affiliate Tracker
   Scoped so they do not leak globally.
   ========================================================= */

body.com_affiliatetracker #sp-component .hidden {
    display: none !important;
}

body.com_affiliatetracker #sp-component .text-right {
    text-align: right !important;
}

body.com_affiliatetracker #sp-component .center {
    text-align: center !important;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 991px) {
    body.com_affiliatetracker #sp-component .nav.nav-tabs {
        gap: 6px !important;
        padding: 8px !important;
    }

    body.com_affiliatetracker #sp-component .nav.nav-tabs .nav-link {
        font-size: 12px !important;
        padding: 0 11px !important;
    }

    body.com_affiliatetracker #sp-component .nav.nav-tabs .nav-link.active {
        padding: 0 11px !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm > .mt-3 {
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    body.com_affiliatetracker #sp-component .page-header {
        min-height: 48px !important;
        margin-bottom: 14px !important;
        padding: 0 18px !important;
        border-radius: 0 12px 12px 0 !important;
    }

    body.com_affiliatetracker #sp-component .page-header h1 {
        font-size: 22px !important;
    }

    body.com_affiliatetracker #sp-component .nav.nav-tabs {
        margin-bottom: 14px !important;
        padding: 8px !important;
        overflow-x: auto !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm > .d-flex.mb-3,
    body.com_affiliatetracker #sp-component form#adminForm > .well,
    body.com_affiliatetracker #sp-component form#adminForm > .filter-panel {
        padding: 14px !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm .field-calendar {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm .field-calendar input {
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm select,
    body.com_affiliatetracker #sp-component form#adminForm select.form-control {
        margin-bottom: 10px !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm button[type="submit"],
    body.com_affiliatetracker #sp-component form#adminForm .btn-primary {
        width: auto !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm > .time-options {
        justify-content: flex-start !important;
        margin: 14px 0 10px 0 !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm > .mt-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 10px 0 12px 0 !important;
    }

    body.com_affiliatetracker #sp-component .at_totals,
    body.com_affiliatetracker #sp-component .resume-number,
    body.com_affiliatetracker #sp-component .dashboard-box,
    body.com_affiliatetracker #sp-component .card-at,
    body.com_affiliatetracker #sp-component .card.border-0.h-100.shadow-sm.dashboard-box {
        min-height: 62px !important;
        padding: 13px 15px !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm > .table_scrolls {
        border-radius: 8px !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm > .table_scrolls table,
    body.com_affiliatetracker #sp-component form#adminForm > table.table,
    body.com_affiliatetracker #sp-component form#adminForm table.table.table-striped {
        min-width: 620px !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm > .center {
        justify-content: stretch !important;
    }

    body.com_affiliatetracker #sp-component form#adminForm > .center a,
    body.com_affiliatetracker #sp-component form#adminForm > .center .btn,
    body.com_affiliatetracker #sp-component form#adminForm a.btn-success,
    body.com_affiliatetracker #sp-component form#adminForm .btn-success {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    body.com_affiliatetracker #sp-component .page-header {
        padding: 0 15px !important;
    }

    body.com_affiliatetracker #sp-component .page-header h1 {
        font-size: 20px !important;
    }

    body.com_affiliatetracker #sp-component .nav.nav-tabs .nav-link {
        height: 29px !important;
        min-height: 29px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    body.com_affiliatetracker #sp-component .nav.nav-tabs .nav-link.active {
        height: 29px !important;
        min-height: 29px !important;
        padding: 0 10px !important;
    }
}