/* Admin View Affiliate Page Styles */

/* Font Awesome Link */
.wcusage-font-awesome-link {
    display: none;
}

/* Main Page Styles */
.wcusage-affiliate-view-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

.wcusage-affiliate-view-page::after {
    content: "";
    display: table;
    clear: both;
}

.admin_page_wcusage_view_affiliate #wpfooter {
    clear: both !important;
}

/* Main Layout */
.wcusage-main-content {
    display: flex;
    gap: 30px;
    margin-top: 10px;
    clear: both;
}

.wcusage-content-left {
    flex: 1;
    min-width: 0;
}

.wcusage-sidebar {
    width: 350px;
    flex-shrink: 0;
}

/* Filters layout */
.wcusage-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.wcusage-filters input[type="date"],
.wcusage-filters input[type="text"],
.wcusage-filters select {
    max-width: 100%;
}

/* Modern Form Styling - Clean and Simple */
.wcusage-form-body {
    padding: 20px 0px;
}

/* Submit area below the section cards */
.wcusage-form-actions {
    margin-top: 4px;
}

/* Each section renders as its own modern card */
.wcusage-form-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    padding: 0 22px 20px;
    margin-bottom: 20px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.wcusage-form-section:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-color: #d0d5dd;
}

/* Never show a card that ended up with no content */
.wcusage-form-section:empty {
    display: none;
}

/* Section heading = full-width card header band */
.wcusage-form-section > h3,
.wcusage-form-section > h4 {
    margin: 0 -22px 18px;
    padding: 14px 22px;
    color: #1d2327;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Action links inside a section header (e.g. "Edit Groups") sit on the right */
.wcusage-form-section > h3 .page-title-action {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.wcusage-form-group {
    margin-bottom: 16px;
}

.wcusage-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.wcusage-form-group input[type="text"],
.wcusage-form-group input[type="email"],
.wcusage-form-group input[type="url"],
.wcusage-form-group input[type="date"],
.wcusage-form-group input[type="number"],
.wcusage-form-group select,
.wcusage-form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
    box-sizing: border-box;
    min-height: 36px;
}

.wcusage-form-group input[type="text"]:focus,
.wcusage-form-group input[type="email"]:focus,
.wcusage-form-group input[type="url"]:focus,
.wcusage-form-group input[type="date"]:focus,
.wcusage-form-group input[type="number"]:focus,
.wcusage-form-group select:focus,
.wcusage-form-group textarea:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

.wcusage-form-group input[readonly] {
    background: #f9fafb;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

/* Checkbox styling */
.wcusage-form-group input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    accent-color: #2271b1;
}

.wcusage-form-group .checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.wcusage-form-group .checkbox-group:last-child {
    margin-bottom: 0;
}

.wcusage-form-group .checkbox-group label {
    margin-bottom: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Select dropdown styling */
.wcusage-form-group select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
}

/* Table styling for plugin fields */
.wcusage-form-group table.form-table {
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.wcusage-form-group table.form-table tr {
    border-bottom: 1px solid #f0f0f0;
}

.wcusage-form-group table.form-table tr:last-child {
    border-bottom: none;
}

.wcusage-form-group table.form-table th,
.wcusage-form-group table.form-table td {
    padding: 8px 0;
    border: none;
    background: transparent;
    vertical-align: top;
}

.wcusage-form-group table.form-table th {
    font-weight: 500;
    color: #374151;
    font-size: 14px;
    width: 200px;
    padding-right: 16px;
}

.wcusage-form-group table.form-table td input[type="text"],
.wcusage-form-group table.form-table td input[type="email"],
.wcusage-form-group table.form-table td input[type="url"],
.wcusage-form-group table.form-table td input[type="date"],
.wcusage-form-group table.form-table td input[type="number"],
.wcusage-form-group table.form-table td select,
.wcusage-form-group table.form-table td textarea {
    width: 100%;
    max-width: 400px;
}

/* Description text styling */
.wcusage-form-group .description,
.wcusage-form-group small {
    color: #6b7280;
    font-size: 12px;
    margin-top: 4px;
    display: block;
    line-height: 1.4;
}

/* Scrollable sections for long content */
.wcusage-scrollable-section {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 12px;
    background: #fafafa;
}

/* Button styling within tables */
.wcusage-form-group .button,
.wcusage-form-group .button-primary,
.wcusage-form-group .button-secondary {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    margin: 2px 0;
}

.wcusage-form-group .button-primary {
    background: linear-gradient(135deg, #2271b1, #135e96);
    color: #fff;
    border: none;
    box-shadow: 0 2px 4px rgba(34,113,177,0.3);
}

.wcusage-form-group .button-primary:hover {
    background: linear-gradient(135deg, #135e96, #0a4b78);
    box-shadow: 0 4px 8px rgba(34,113,177,0.4);
}

.wcusage-form-group .button-secondary {
    background: #6b7280;
    color: white;
    border: 1px solid #6b7280;
}

.wcusage-form-group .button-secondary:hover {
    background: #4b5563;
}

.wcusage-form-row {
    display: flex;
    gap: 12px;
}

.wcusage-form-row .wcusage-form-group {
    flex: 1;
}

.wcusage-btn {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    border: 1px solid #d1d5db;
    cursor: pointer;
    background: #fff;
}

.wcusage-btn-primary {
    background: linear-gradient(135deg, #2271b1, #135e96);
    color: #fff;
    border: none;
    box-shadow: 0 2px 4px rgba(34,113,177,0.3);
}

.wcusage-btn-primary:hover {
    background: linear-gradient(135deg, #135e96, #0a4b78);
    box-shadow: 0 4px 8px rgba(34,113,177,0.4);
    transform: translateY(-1px);
}

.wcusage-btn-secondary {
    background: #6b7280;
    color: white;
    border-color: #6b7280;
}

.wcusage-btn-secondary:hover {
    background: #4b5563;
}

/* Form table inputs in plugin sections (apply same styling as Basic Information) */
.wcusage-form-section .form-table input[type="text"].regular-text,
.wcusage-form-section .form-table input[type="email"].regular-text,
.wcusage-form-section .form-table input[type="url"].regular-text,
.wcusage-form-section .form-table input[type="date"].regular-text,
.wcusage-form-section .form-table input[type="number"].regular-text,
.wcusage-form-section .form-table select.regular-text,
.wcusage-form-section .form-table select,
.wcusage-form-section .form-table textarea.regular-text {
    width: 100%;
    max-width: 400px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
    box-sizing: border-box;
}

.wcusage-form-section .form-table input[type="text"].regular-text:focus,
.wcusage-form-section .form-table input[type="email"].regular-text:focus,
.wcusage-form-section .form-table input[type="url"].regular-text:focus,
.wcusage-form-section .form-table input[type="date"].regular-text:focus,
.wcusage-form-section .form-table input[type="number"].regular-text:focus,
.wcusage-form-section .form-table select.regular-text:focus,
.wcusage-form-section .form-table select:focus,
.wcusage-form-section .form-table textarea.regular-text:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

.wcusage-form-section .form-table input[readonly].regular-text {
    background: #f9fafb;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

/* Checkbox styling in form tables */
.wcusage-form-section .form-table input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    accent-color: #2271b1;
}

/* Select dropdown styling in form tables */
.wcusage-form-section .form-table select.regular-text,
.wcusage-form-section .form-table select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
}

/* Sidebar Styling */
.wcusage-affiliate-info-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.wcusage-affiliate-info-box:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-color: #d0d5dd;
}

.wcusage-affiliate-info-box h3 {
    margin: 0;
    padding: 14px 18px;
    background: #f9fafb;
    color: #1d2327;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.wcusage-affiliate-info-box .info-content {
    padding: 16px 18px;
}

.wcusage-affiliate-info-box .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.wcusage-affiliate-info-box .info-row:last-child {
    border-bottom: none;
}

.wcusage-affiliate-info-box .info-label {
    font-weight: 500;
    color: #50575e;
    font-size: 13px;
}

.wcusage-affiliate-info-box .info-value {
    color: #1d2327;
    font-size: 13px;
    text-align: right;
    font-weight: 500;
}

.wcusage-affiliate-info-box .info-value a {
    color: #2271b1;
    text-decoration: none;
}

.wcusage-affiliate-info-box .info-value a:hover {
    color: #135e96;
    text-decoration: underline;
}

/* Tab Styling — the canonical container / tab / active-state rules live in the
   ".wcusage-tabs" block further down. Only the disabled-tab state is defined here
   (previously this section held a second, conflicting set of tab styles). */
.wcusage-tabs .nav-tab.wcusage-tab-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.tab-content {
    padding: 24px;
}

.tab-content h3 {
    color: #1d2327;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.tab-content h3 i {
    margin-right: 8px;
    color: #2271b1;
    font-size: 15px;
}

/* Affiliate Coupons table: full width on large screens */
#tab-overview table.wp-list-table {
    display: table;
    width: 100%;
    table-layout: fixed;
    white-space: normal;
    overflow: visible;
}

/* Make all columns equal width in the affiliate coupons table */
#tab-overview table.wp-list-table th,
#tab-overview table.wp-list-table td {
    width: 1%;
}

/* Prevent tooltip clipping inside the affiliate coupons table */
#tab-overview table.wp-list-table thead,
#tab-overview table.wp-list-table tbody,
#tab-overview table.wp-list-table tr,
#tab-overview table.wp-list-table th,
#tab-overview table.wp-list-table td {
    overflow: visible !important;
    position: relative;
}

/* Keep header tooltips compact and unclipped */
#tab-overview table.wp-list-table th .custom-tooltip {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* Center align all columns in the Coupons table */
#tab-overview table.wp-list-table th,
#tab-overview table.wp-list-table td {
    text-align: center !important;
}

/* Small consistent padding on Coupons table cells */
#tab-overview table.wp-list-table th,
#tab-overview table.wp-list-table td {
    padding: 10px 7px !important;
}

/* Restore Quick Edit row styling: left-align and comfy padding */
#tab-overview table.wp-list-table tr.quick-edit-row > td {
    text-align: left !important;
    padding: 10px 12px !important;
}

/* Coupon actions: Quick Edit with secondary actions below */
.wcusage-actions-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    white-space: normal;
    justify-content: center; /* center align actions */
}
.wcusage-actions-inline .button.button-large.button-primary { /* compact large button to fit with links */
    font-size: 12px;
    padding: 2px 8px; /* compact button size */
    height: auto;
    box-shadow: none;
    flex: 0 0 auto; /* auto width */
    margin: 0;
}
.wcusage-actions-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.wcusage-actions-stack .wcusage-delete-action {
    color: #7a0707;
    border: 1px solid #e1e1e1;
    background: #fff;
}

/* Inline links under Quick Edit */
.wcusage-actions-inline .sep { color: #999; margin: 0 4px; }
.wcusage-inline-link { font-size: 12px; text-decoration: none; }
.wcusage-inline-link:hover { text-decoration: underline; }
.wcusage-delete-link { color: #7a0707; }

/* Icon-only actions for Edit/Delete using Dashicons */
.wcusage-actions-inline .sep { display: none; }
.wcusage-actions-inline .wcusage-inline-link {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0; /* hide text label visually */
    line-height: 1;
}
.wcusage-actions-inline .wcusage-inline-link::before {
    font-family: dashicons;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    content: "\f464"; /* pencil/edit */
}
.wcusage-actions-inline .wcusage-delete-link::before {
    content: "\f182"; /* trash */
}
.wcusage-actions-inline .wcusage-inline-link:hover { text-decoration: none; }

/* Hide referral link text input so only copy button shows */
.wcusage-tab-content .wcusage-copy-link-text {
    display: none !important;
}

/* Copy link button hover */
.wcusage-tab-content .wcusage-copy-link-button {
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.wcusage-tab-content .wcusage-copy-link-button:hover {
    background: #2271b1 !important;
    border-color: #2271b1 !important;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(34, 113, 177, 0.35);
}
.wcusage-tab-content .wcusage-copy-link-button:hover i {
    color: #fff;
}
.wcusage-tab-content .wcusage-copy-link-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Ensure all tables inside tab content fill container width on large screens */
.wcusage-tab-content table.wp-list-table { width: 100%; }

/* On smaller screens, allow horizontal scroll and prevent squashing */
@media (max-width: 1320px) {
    #tab-overview table.wp-list-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        min-width: 100%;
    }
}

/* Ensure no hidden overflow hides the table on the page (only on narrower screens) */
@media (max-width: 1320px) {
    .wcusage-affiliate-view-page,
    .wcusage-main-content,
    .wcusage-content-left,
    .wcusage-tab-content,
    #tab-overview {
        overflow: visible !important;
    }
}
/* On wider screens, prevent bleed into the sidebar by containing horizontal overflow */
@media (min-width: 1281px) {
    .wcusage-content-left,
    .wcusage-tab-content {
        overflow-x: auto; /* contain any accidental over-wide content instead of overlapping sidebar */
    }
}

/* Responsive Design */
@media (max-width: 1320px) {
    .wcusage-main-content {
    flex-direction: column;
    gap: 18px;
    }

    .wcusage-sidebar {
        width: 100%;
    position: static; /* ensure non-sticky */
    }

    .wcusage-affiliate-info-box {
    position: static; /* ensure non-sticky */
    }

    /* Make tab bar horizontally scrollable on smaller screens */
    .wcusage-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
    }
    .wcusage-tabs .nav-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 13px;
    }
    .tab-content {
        padding: 16px;
    }

    /* Tables: allow horizontal scroll on tablets too */
    .tab-content table.wp-list-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    /* Compact paddings and font sizes */
    .wcusage-form-body { padding: 16px 8px; }
    .tab-content h3 { font-size: 18px; margin-bottom: 16px; }
    .wcusage-stat-box { padding: 16px; }

    /* Tables: allow horizontal scroll instead of squashing */
    .tab-content table.wp-list-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .wp-list-table th, .wp-list-table td { padding: 8px 10px; }

    /* Filters stack nicely */
    .wcusage-filters { gap: 6px; }
    .wcusage-filters .button { width: auto; }
}

/* Hide less important columns on very small screens */
@media (max-width: 600px) {
    /* Referrals: hide Customer and Coupon Code */
    #tab-referrals table.wp-list-table th:nth-child(3),
    #tab-referrals table.wp-list-table td:nth-child(3),
    #tab-referrals table.wp-list-table th:nth-child(4),
    #tab-referrals table.wp-list-table td:nth-child(4) {
        display: none;
    }

    /* Visits: hide Landing Page, Referrer URL, IP Address, and Action */
    #tab-visits table.wp-list-table th:nth-child(3),
    #tab-visits table.wp-list-table td:nth-child(3),
    #tab-visits table.wp-list-table th:nth-child(4),
    #tab-visits table.wp-list-table td:nth-child(4),
    #tab-visits table.wp-list-table th:nth-child(5),
    #tab-visits table.wp-list-table td:nth-child(5),
    #tab-visits table.wp-list-table th:nth-child(8),
    #tab-visits table.wp-list-table td:nth-child(8) {
        display: none;
    }

    /* Filters: full-width inputs */
    .wcusage-filters input[type="date"],
    .wcusage-filters input[type="text"],
    .wcusage-filters select {
        flex: 1 1 100%;
    }
}

/* Existing styles */
.wcusage-stat-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}

.wcusage-stat-box:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-color: #d0d5dd;
    transform: translateY(-2px);
}

.wcusage-stat-box .stat-value {
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    color: #1d2327;
    margin-bottom: 8px;
    display: block;
}

.wcusage-stat-box .stat-label {
    font-size: 12px;
    color: #646970;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.wcusage-coupon-dropdown {
    margin-bottom: 25px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.wcusage-coupon-dropdown label {
    font-weight: 600;
    display: inline-block;
    width: 140px;
    color: #1d2327;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wcusage-affiliate-info-box .info-row:last-child {
    margin-bottom: 0;
}

/* Standalone tab "chips" — no wrapping box; each tab is its own bordered pill.
   Default = light grey chip, hover = blue tint, active = filled blue chip. */
.wcusage-tabs {
    margin-bottom: 24px;
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    z-index: 99;
    clear: both;
    display: flex;
    gap: 5px;
}

.wcusage-tabs .nav-tab {
    border: 1px solid #e5e7eb !important;
    background: #f9fafb;
    color: #50575e;
    text-decoration: none;
    padding: 10px 18px;
    margin: 0;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.wcusage-tabs .nav-tab:hover {
    background: #f9fbff;
    color: #2271b1;
    border-color: #cdddf5;
}

.wcusage-tabs .nav-tab-active {
    background: #f9fbff;
    border-color: #c5e5ff;
    color: #2271b1;
    font-weight: 600;
}

/* Suppress the blue focus ring/outline that WP core + browsers draw on a tab
   link while it is clicked/focused. */
.wcusage-tabs .nav-tab:focus {
    outline: none;
    box-shadow: none;
}

.wcusage-tab-content {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 0 10px 10px 10px;
    border-radius: 0px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-top: 0;
    position: relative;
}

.wcusage-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

/* Limit to maximum 3 columns on larger screens */
@media (min-width: 1200px) {
    .wcusage-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.wcusage-stat-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 18px 16px;
    border-radius: 10px;
    text-align: center;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: relative;
    overflow: visible;
}

.wcusage-stat-box:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-color: #d0d5dd;
}

.wcusage-stat-box .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #1d2327;
    margin-bottom: 4px;
    display: block;
    line-height: 1.2;
}

.wcusage-stat-box .stat-label {
    font-size: 12px;
    color: #646970;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.wcusage-coupon-dropdown {
    margin-bottom: 20px;
    padding: 16px 20px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.wcusage-coupon-dropdown select {
    padding: 8px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #1d2327;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 200px;
    min-height: 36px;
}

.wcusage-coupon-dropdown select:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

/* Modern Table Styling */
.wp-list-table.widefat.fixed.striped {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-top: 16px;
    border-collapse: separate;
    border-spacing: 0;
}

.wp-list-table.widefat.fixed.striped thead th {
    background: #f9fafb;
    color: #50575e;
    font-weight: 600;
    padding: 12px 10px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.wp-list-table.widefat.fixed.striped tbody tr {
    transition: background 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.wp-list-table.widefat.fixed.striped tbody tr:nth-child(even) {
    background: #f9fafb;
}

.wp-list-table.widefat.fixed.striped tbody tr:hover {
    background: #f3f4f6;
}

.wp-list-table.widefat.fixed.striped tbody td {
    padding: 12px 10px;
    border: none;
    vertical-align: middle;
    color: #1d2327;
    font-size: 13px;
}

/* Status badges */
.order-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.order-status.status-completed {
    background: #e6f7ee;
    color: #00a32a;
}

.order-status.status-on-hold {
    background: #fef3e6;
    color: #d97706;
}

.order-status.status-cancelled {
    background: #fde8e8;
    color: #dc2626;
}

.order-status.status-processing {
    background: #eef3ff;
    color: #2271b1;
}

/* Button styling */
.wcusage-tab-content .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #2271b1, #135e96);
    border: none;
    color: #fff;
    padding: 8px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(34,113,177,0.3);
    cursor: pointer;
}

.wcusage-tab-content .button:hover {
    background: linear-gradient(135deg, #135e96, #0a4b78);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(34,113,177,0.4);
}

/* Responsive design */
@media (max-width: 768px) {
    .wcusage-affiliate-info-box {
        padding: 20px;
    }

    .wcusage-tabs .nav-tab {
        padding: 12px 16px;
        font-size: 14px;
    }

    .wcusage-tab-content {
        padding: 20px;
    }

    .wcusage-stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .wp-list-table.widefat.fixed.striped {
        font-size: 14px;
    }

    .wp-list-table.widefat.fixed.striped thead th,
    .wp-list-table.widefat.fixed.striped tbody td {
        padding: 10px 8px;
    }
}

/* Enhanced tab content visibility */
.wcusage-tab-content > div {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.wcusage-tab-content > div.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Back button styling */
.page-title-action {
    background: #fff;
    border: 1px solid #d0d5dd;
    color: #374151;
    padding: 8px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.page-title-action:hover {
    background: #eef3ff;
    border-color: #2271b1;
    color: #2271b1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Back button mobile tweaks */
.wcusage-view-affiliate-header-actions .wcu-btn-dashboard-secondary { max-width: 100%; }
@media (max-width: 782px) {
    .wcusage-view-affiliate-header-actions .wcu-btn-dashboard-secondary {
        float: none !important;
        display: inline-flex;
        align-items: center;
        margin: 8px 0 12px;
        padding: 8px 14px;
        font-size: 13px;
        line-height: 1.3;
    }
    .wp-heading-inline { display: block; margin-bottom: 6px !important; }
}

/* Mobile header layout */
@media (max-width: 782px) {
    /* Stack the heading block so it takes full width */
    .wp-heading-inline {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        margin-bottom: 12px !important;
    }

    /* Center the avatar */
    .wcusage-user-avatar {
        margin: 0 0 8px 0 !important;
    }

    /* Dashboard buttons: wrap and center beneath avatar/name */
    .wp-heading-inline .wcu-btn-dashboard-action {
        margin: 6px 0 0 0 !important;
        width: 100%;
        text-align: center;
        justify-content: center;
        display: inline-flex;
        box-sizing: border-box;
    }

    /* Right-side container: un-float and center below the heading */
    .wcusage-view-affiliate-header-actions {
        float: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 16px;
    }

    .wcusage-view-affiliate-header-actions .wcu-btn-dashboard-secondary {
        width: 100%;
        justify-content: center;
        text-align: center;
        margin: 0 !important;
    }

    .wcusage-view-affiliate-header-actions .wcusage-delete-dropdown {
        margin-top: 8px !important;
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

/* User Avatar Styling */
.wcusage-user-avatar {
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    border: 2px solid #e5e7eb;
    transition: border-color 0.2s ease;
    width: 64px;
    height: 64px;
}

.wcusage-user-avatar:hover {
    border-color: #2271b1;
}

/* Inline style replacements */
.wcusage-heading-inline {
    color: #1d2327;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
}

.wcusage-float-right {
    float: right;
}

.wcusage-margin-right-5 {
    margin-right: 5px;
}

.wcusage-margin-right-8 {
    margin-right: 8px;
}

/* Mobile tab dropdown */
.wcusage-tab-select-wrapper {
    display: none;
}
@media (max-width: 782px) {
    .wcusage-tabs {
        display: none !important;
    }
    .wcusage-tab-select-wrapper {
        display: block;
        width: 100%;
        margin-bottom: 16px;
    }
    .wcusage-tab-select {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 16px;
        text-align: center;
        font-size: 16px !important;
        font-weight: 500;
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        background: #fff;
        color: #1d2327;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232271b1' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 10px;
        cursor: pointer;
    }
    .wcusage-tab-select:focus {
        outline: none;
        box-shadow: 0 0 0 1px #2271b1;
        border-color: #2271b1;
    }
}

/* --- Mobile overflow fixes: ensure tabs and tables can scroll horizontally --- */
/* Tabs: always allow horizontal scroll if needed */
.wcusage-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto !important; /* override earlier hidden */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.wcusage-tabs .nav-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Table containers: make wrappers scroll horizontally on small screens */
#wcusage-referrals-table-container,
#wcusage-visits-table-container,
#wcusage-payouts-table-container,
#wcusage-activity-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ensure tables themselves don't get clipped; allow wide content */
@media (max-width: 1320px) {
    .wcusage-tab-content table.wp-list-table {
        display: block;
        width: 100%;
        overflow-x: auto !important; /* override any global overflow */
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

.wcusage-margin-right-10 {
    margin-right: 10px;
}

.wcusage-margin-left-5 {
    margin-left: 5px;
}

.wcusage-tab-heading {
    color: #1d2327;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.wcusage-icon-color-primary {
    color: #2271b1;
}

.wcusage-margin-top-neg20 {
    margin-top: -20px;
}

.wcusage-margin-bottom-40 {
    margin-bottom: 40px;
}

.wcusage-padding-5-10 {
    padding: 5px 10px;
}

.wcusage-border-black {
    border: 1px solid #000000ff;
}

.wcusage-border-radius-4 {
    border-radius: 4px;
}

.wcusage-bg-light-red {
    background-color: #ffc2c2ff;
}

.wcusage-font-size-12 {
    font-size: 12px;
}

.wcusage-bg-light-gray {
    background: #f9fafb;
}

.wcusage-padding-2-4 {
    padding: 2px 4px;
}

.wcusage-border-radius-3 {
    border-radius: 3px;
}

/* Lifetime Customers tab */
.wcusage-lifetime-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0 0 20px;
}

.wcusage-lifetime-summary-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
}

.wcusage-lifetime-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: #1d2327;
    line-height: 1.2;
}

.wcusage-lifetime-summary-label {
    margin-top: 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
}

.wcusage-lifetime-muted {
    color: #6b7280;
    font-size: 12px;
}

@media screen and (max-width: 782px) {
    .wcusage-lifetime-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Lifetime Customers: inline editing */
.wcusage-lifetime-actions a {
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.wcusage-lifetime-actions a + a {
    margin-left: 12px;
}

.wcusage-lifetime-remove-button {
    color: #b52828;
}

.wcusage-lifetime-cancel-button {
    color: #6b7280;
}

.wcusage-lifetime-customers-table tr.wcusage-lifetime-row-editing > td {
    background: #f6f9fc;
}

.wcusage-lifetime-customers-table .wcusage-lifetime-coupon-input,
.wcusage-lifetime-customers-table .wcusage-lifetime-expiry-input {
    width: 100%;
    max-width: 190px;
}

.wcusage-lifetime-customers-table tr.wcusage-loading {
    opacity: 0.5;
}

#wcusage-lifetime-message {
    margin: 0 0 15px;
}

/* Lifetime Customers: "Link a Customer" form.
   The toggle shares the status filter row, pushed to the far right of it.

   Scoped through the row's ID on purpose: core's ".wp-core-ui .button" sets
   both "display: inline-block" and "margin: 0", and it out-specifies a lone
   class - without the extra weight the icon does not line up and the button
   sits next to Filter instead of at the end of the row.

   Nothing here sets a colour: core themes .button through
   --wp-admin-theme-color, so the icon inherits the right colour for whichever
   admin colour scheme the user has picked, and the open state uses core's own
   pressed style (the "active" class, applied by the JS) rather than a
   hardcoded grey that only matches the default scheme. */
#wcusage-lifetime-filters {
    flex-wrap: wrap;
}

#wcusage-lifetime-filters .wcusage-lifetime-add-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    margin-left: auto;
}

.wcusage-lifetime-add-form {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 0 0 16px;
}

.wcusage-lifetime-add-desc {
    margin: 0 0 14px;
    color: #50575e;
    font-size: 13px;
}

.wcusage-lifetime-add-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

/* Each field is sized by its flex basis rather than by its content, so the
   hint text underneath wraps inside its own column instead of widening it and
   pushing the submit button onto a second row. */
.wcusage-lifetime-add-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wcusage-lifetime-add-field label {
    font-weight: 600;
    font-size: 13px;
    color: #1d2327;
}

.wcusage-lifetime-add-field .regular-text,
.wcusage-lifetime-add-field select,
.wcusage-lifetime-add-field input[type="date"] {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.wcusage-lifetime-add-customer-field {
    flex: 1 1 260px;
}

.wcusage-lifetime-add-coupon-field {
    flex: 0 1 230px;
}

.wcusage-lifetime-add-expiry-field {
    flex: 0 0 195px;
}

/* Keeps the button on the same baseline as the inputs, below their labels. */
.wcusage-lifetime-add-submit-field {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding-top: 22px;
}

.wcusage-lifetime-add-spinner {
    float: none !important;
    margin: 0 !important;
}

/* Reserved so the row does not jump when a hint appears. */
.wcusage-lifetime-add-hint {
    display: block;
    min-height: 16px;
    line-height: 16px;
}

.wcusage-lifetime-add-hint a {
    text-decoration: none;
}

.wcusage-lifetime-warn {
    color: #b26200;
}

@media screen and (max-width: 782px) {
    .wcusage-lifetime-add-row {
        flex-direction: column;
        align-items: stretch;
    }
    .wcusage-lifetime-add-submit-field {
        padding-top: 6px;
    }
}