.wp-list-table .column-ID {
    width: 75px;
}
/* The edit dashicon is 20px tall and "vertical-align: top", which made the ID
   cell's line box taller than every other column and left the number sitting
   below their centre line. Flex the link instead so icon and number are
   centred on each other, and on the rest of the row. */
.wp-list-table .column-ID .wcusage-coupon-id-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wp-list-table .column-ID .wcusage-coupon-id-link .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 1;
    vertical-align: middle;
}
.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;
}
/* Covers the gap between the trigger and the panel, so moving the pointer down
   into the panel does not cross un-hovered space and close it on the way.
   Hovering it counts as hovering the wrapper, since it is the wrapper's own
   pseudo-element - which is also why it cannot live on the panel: the order-box
   panel scrolls its content and would clip anything above its top edge. It is
   only in the page while the tooltip is open. */
.wcusage-rate-tooltip::before {
    content: "";
    display: none;
    height: 12px;
    left: 50%;
    max-width: 96vw;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 360px;
}
.wcusage-rate-tooltip:hover::before,
.wcusage-rate-tooltip:focus-within::before {
    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;
}

/* ------------------------------------------------------------------
   Commission breakdown tooltip - order edit screen, "Coupon Affiliate" panel.
   Reuses the Commission Levels tooltip above, with the amount itself as the
   trigger instead of a "?" button.
   ------------------------------------------------------------------ */

/* The panel is drawn outside the metabox, so nothing in its way may clip it. */
#wcusage_affiliate_info,
#wcusage_affiliate_info .inside,
#wcusage_affiliate_info .postbox-header {
    overflow: visible;
}

/* The shared wrapper above is an inline-flex box aligned to the middle of the
   line. In the metabox that put the commission amount a couple of pixels clear
   of the row's baseline while the label beside it stayed where it was, so the
   figure read as misaligned. An inline-block takes its baseline from the amount
   inside it, which is the line the label is already sitting on. */
.wcusage-rate-tooltip--orderbox {
    display: inline-block;
    margin-left: 0;
    max-width: 100%;
    vertical-align: baseline;
}
.wcusage-commission-trigger {
    border-bottom: 1px dotted #787c82;
    cursor: help;
}
.wcusage-commission-trigger:focus {
    outline: 1px solid #2271b1;
    outline-offset: 2px;
}

/* Opens to the left. The metabox sits in the narrow admin sidebar, so a panel
   centred on the trigger would run off the right-hand edge of the screen. */
.wcusage-rate-tooltip--orderbox .wcusage-rate-tooltip-panel {
    left: auto;
    right: 0;
    transform: none;
    min-width: 260px;
    max-width: 320px;
    /* The title below is sticky, so the panel's own top padding is moved onto it -
       otherwise the padding scrolls away and leaves the title floating. */
    padding: 0 10px 10px;
    /* An order with a lot of line items builds a very tall panel, which would run
       off the bottom of the screen with no way to reach the totals. Capped against
       the window as well as absolutely, so a long breakdown scrolls on a big screen
       and any breakdown scrolls on a short one. */
    max-height: 60vh;
    max-height: min(60vh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
/* The bridge follows the panel: right-aligned rather than centred on the amount. */
.wcusage-rate-tooltip--orderbox::before {
    left: auto;
    right: -6px;
    transform: none;
    width: 320px;
}

/* Compact spacing throughout, since this panel can carry a row per product and
   lives in a 280px sidebar. */
.wcusage-rate-tooltip--orderbox .wcusage-rate-tooltip-title {
    background: #fff;
    border-bottom: 1px solid #f0f0f1;
    font-size: 12px;
    /* Held in view while the rows below it scroll. The negative side margins take
       its background out to the panel's edges so nothing shows through beside it,
       and the shadow separates it from whatever has scrolled up underneath - the
       margin below it is gone by then. */
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.16);
    margin: 0 -10px 7px;
    padding: 9px 10px 6px;
    position: sticky;
    top: 0;
    z-index: 1;
}
.wcusage-rate-tooltip--orderbox .wcusage-rate-tooltip-section {
    margin-top: 7px;
}
.wcusage-rate-tooltip--orderbox .wcusage-rate-tooltip-section-title {
    font-size: 10px;
    margin-bottom: 3px;
}
.wcusage-rate-tooltip--orderbox .wcusage-rate-tooltip-row {
    border-radius: 4px;
    gap: 6px;
    margin-top: 3px;
    padding: 4px 7px;
}
.wcusage-rate-tooltip--orderbox .wcusage-rate-tooltip-empty {
    font-size: 11px;
    padding: 1px 0;
}
/* The arrow is drawn on the container rather than the panel, because the panel
   scrolls its own content and would clip an arrow sitting above its top edge. */
.wcusage-rate-tooltip--orderbox .wcusage-rate-tooltip-panel::after {
    display: none;
}
.wcusage-rate-tooltip--orderbox::after {
    background: #fff;
    border-left: 1px solid #dcdcde;
    border-top: 1px solid #dcdcde;
    content: "";
    display: none;
    height: 10px;
    position: absolute;
    right: 14px;
    top: calc(100% + 3px);
    transform: rotate(45deg);
    width: 10px;
    z-index: 100000;
}
.wcusage-rate-tooltip--orderbox:hover::after,
.wcusage-rate-tooltip--orderbox:focus-within::after {
    display: block;
}

/* Label/value rows, as opposed to the three-column rate rows that carry a
   "Using" / "Overridden" chip. */
.wcusage-rate-tooltip-row.is-plain {
    grid-template-columns: minmax(0, 1fr) auto;
}
.wcusage-rate-tooltip-row.is-plain .wcusage-rate-tooltip-value {
    text-align: right;
    white-space: normal;
}
.wcusage-rate-tooltip-row.is-negative .wcusage-rate-tooltip-value {
    color: #b32d2e;
}
.wcusage-rate-tooltip-row.is-total {
    background: #f0f6fc;
    border-color: #72aee6;
    font-size: 13px;
}
.wcusage-rate-tooltip-row.is-total .wcusage-rate-tooltip-level {
    font-weight: 700;
}

/* The order value a line's percentage was worked out on, shown before the
   commission it produced, so the arithmetic can be followed. */
.wcusage-breakdown-base {
    color: #646970;
    font-weight: 400;
}

.wcusage-rate-tooltip-panel code {
    background: #f0f0f1;
    border-radius: 3px;
    font-size: 11px;
    padding: 1px 5px;
}