.wp-list-table .column-ID {
    width: 75px;
}
.wcusage-coupon-rate-subline {
    color: #646970;
    font-size: 12px;
    line-height: 1.3;
    margin-top: 2px;
    /* Must be allowed to wrap. The list table is "table-layout: fixed", so a long
       rate such as "50% + £24.00 / Product" cannot widen the column - with nowrap
       it overflowed instead, carrying the "?" trigger up to 48px outside the cell
       and over the neighbouring column. */
    white-space: normal;
    overflow-wrap: anywhere;
}
.wcusage-coupon-rate-label {
    font-weight: 600;
}
.wcusage-admin-page .wp-list-table .column-commission,
.wcusage-affiliate-view-page .wp-list-table .column-commission {
    overflow: visible;
}
.wcusage-rate-tooltip {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-left: 4px;
    vertical-align: middle;
}
.wcusage-rate-tooltip-trigger {
    align-items: center;
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    border-radius: 50%;
    color: #50575e;
    cursor: help;
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    height: 16px;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    width: 16px;
}
.wcusage-rate-tooltip-trigger:focus,
.wcusage-rate-tooltip-trigger:hover {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
    outline: none;
}
/* Opens downwards. It used to open upwards, which is fine for a short panel but not
   for a coupon with several rate levels set - "50% + £24.00 / Product" builds a
   254px panel against roughly 72px for a percent-only coupon - so on rows near the
   top of the list it was drawn above the top of the page, or behind the admin bar,
   and hovering appeared to do nothing. There is always room below a table row. */
.wcusage-rate-tooltip-panel {
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    top: calc(100% + 8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    color: #1d2327;
    display: none;
    font-size: 12px;
    font-weight: 400;
    left: 50%;
    letter-spacing: normal;
    line-height: 1.35;
    min-width: 300px;
    padding: 12px;
    position: absolute;
    text-align: left;
    text-transform: none;
    transform: translateX(-50%);
    white-space: normal;
    width: max-content;
    max-width: 360px;
    z-index: 99999;
}
.wcusage-rate-tooltip-panel::after {
    background: #fff;
    border-left: 1px solid #dcdcde;
    border-top: 1px solid #dcdcde;
    top: -6px;
    content: "";
    height: 10px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
}
.wcusage-rate-tooltip:hover .wcusage-rate-tooltip-panel,
.wcusage-rate-tooltip:focus-within .wcusage-rate-tooltip-panel {
    display: block;
}
.wcusage-rate-tooltip-title {
    color: #1d2327;
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}
.wcusage-rate-tooltip-section {
    display: block;
    margin-top: 8px;
}
.wcusage-rate-tooltip-section:first-of-type {
    margin-top: 0;
}
.wcusage-rate-tooltip-title + .wcusage-rate-tooltip-section {
    margin-top: 0;
}
.wcusage-rate-tooltip-section-title {
    color: #646970;
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.wcusage-rate-tooltip-row {
    align-items: center;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(86px, 1fr) auto auto;
    margin-top: 4px;
    padding: 6px 8px;
}
.wcusage-rate-tooltip-row.is-active {
    background: #f0f6fc;
    border-color: #72aee6;
}
.wcusage-rate-tooltip-row.is-overridden {
    color: #646970;
}
.wcusage-rate-tooltip-level {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}
.wcusage-rate-tooltip-value {
    color: #1d2327;
    font-weight: 700;
    white-space: nowrap;
}
.wcusage-rate-tooltip-status {
    background: #e5e5e5;
    border-radius: 999px;
    color: #50575e;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    white-space: nowrap;
}
.wcusage-rate-tooltip-row.is-active .wcusage-rate-tooltip-status {
    background: #00a32a;
    color: #fff;
}
.wcusage-rate-tooltip-empty {
    color: #646970;
    display: block;
    padding: 2px 0;
}
/* Coupons table: shrink checkbox column and ensure borders */
.wcusage-admin-page .wp-list-table .column-cb,
.wcusage-admin-page .wp-list-table .check-column {
    width: 36px !important;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    vertical-align: middle;
    text-align: center !important;
}
.wcusage-admin-page .wp-list-table .check-column input[type="checkbox"] {
    margin: 0 auto !important;
}
.wcusage-admin-page .wp-list-table thead th.check-column,
.wcusage-admin-page .wp-list-table tbody td.check-column {
    border-bottom: 1px solid #e2e4e7;
}
.wcusage-admin-page .wp-list-table tfoot th.check-column {
    border-top: 1px solid #e2e4e7;
}
.quick-edit-row {
    background: #fff;
}
.quick-edit-form {
    padding: 0 20px;
    margin: 10px 0;
}
.quick-edit-fields {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
@media (max-width: 782px) {
    .quick-edit-fields {
        grid-template-columns: 1fr;
    }
}
.quick-edit-fields .form-field {
    margin: 0 0 15px 0;
}
.quick-edit-fields .form-field.full-width {
    width: 100%;
    margin-bottom: 15px;
}
.quick-edit-fields .form-field input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

.form-field.checkbox-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.quick-edit-fields .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}
.form-row input {
    margin: 0 !important
}
.quick-edit-fields .section-heading {
    margin: 0 0 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    grid-column: 1 / -1;
}
.quick-edit-fields label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #50575e;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.quick-edit-fields .form-field select {
    max-width: 100%;
}
.quick-edit-fields input[type="text"],
.quick-edit-fields input[type="number"],
.quick-edit-fields input[type="date"],
.quick-edit-fields select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    box-shadow: none;
    background-color: #fff;
    color: #1d2327;
    font-size: 13px;
    min-height: 36px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quick-edit-fields input[type="text"]:focus,
.quick-edit-fields input[type="number"]:focus,
.quick-edit-fields input[type="date"]:focus,
.quick-edit-fields select:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}
.quick-edit-fields input[type="checkbox"] {
    margin: 2px 8px 0 0;
    vertical-align: middle;
}
.quick-edit-fields .checkbox-label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
.inline-edit-save {
    margin: 20px 0 0 0 !important;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    text-align: center !important;
}
.inline-edit-save .button {
    margin-top: 10px;
    margin-right: 10px;
}
.inline-edit-save .spinner {
    float: none;
    margin: 0 10px 0 0;
    vertical-align: middle;
}

.wcu-autocomplete-user {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    box-shadow: none;
    background-color: #fff;
    color: #1d2327;
    font-size: 13px;
    min-height: 36px;
}

.wcu-autocomplete-user:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000 !important;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.ui-autocomplete li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s ease;
}

.ui-autocomplete li:hover {
    background-color: #f9fafb;
}