.livi-notice {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 650;
}

.livi-notice--success {
    color: #067647;
    background: #ecfdf3;
    border-color: #abefc6;
}

.livi-notice--error {
    color: #b42318;
    background: #fef3f2;
    border-color: #fecdca;
}

.livi-checkbox-row {
    margin-top: 20px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px !important;
}

.livi-checkbox-row input {
    width: 18px !important;
    min-height: 18px !important;
    margin: 0;
}

.livi-qr-box {
    width: 202px;
    min-width: 202px;
    min-height: 202px;
    padding: 10px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--livi-border, #e4e7ec);
    border-radius: 12px;
}

.livi-qr-box img,
.livi-qr-box canvas {
    display: block;
    max-width: 100%;
    height: auto !important;
}

.livi-created-card {
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    border-top: 4px solid #0c1c4d;
}

.livi-created-card__content {
    flex: 1;
    min-width: 0;
}

.livi-created-card h2 {
    margin: 6px 0 12px;
}

.livi-created-card__name {
    margin: 0 0 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.livi-created-card__name span {
    color: var(--livi-muted, #667085);
}

.livi-referral-details {
    margin: 0 0 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.livi-referral-details div {
    padding: 12px;
    border-radius: 8px;
    background: var(--livi-surface-soft, #f9fafb);
}

.livi-referral-details dt {
    color: var(--livi-muted, #667085);
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.livi-referral-details dd {
    margin: 5px 0 0;
    font-weight: 750;
}

.livi-referral-url-label {
    margin: 0 0 6px;
    color: var(--livi-muted, #667085);
    font-size: .82rem;
}

.livi-referral-url,
.livi-table-link {
    color: #0c1c4d;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.livi-qr-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.livi-table-subtext {
    margin-top: 3px;
    display: block;
    color: var(--livi-muted, #667085);
    font-size: .8rem;
}

.livi-table-link {
    max-width: 340px;
    margin-top: 4px;
    display: block;
    font-size: .78rem;
}

.livi-status {
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 750;
}

.livi-status--active {
    color: #067647;
    background: #ecfdf3;
}

.livi-status--pending {
    color: #b54708;
    background: #fffaeb;
}

.livi-status--inactive {
    color: #b42318;
    background: #fef3f2;
}

.livi-button--small {
    min-height: 36px;
    padding: 7px 11px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .livi-created-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .livi-referral-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .livi-referral-details {
        grid-template-columns: 1fr;
    }
}

.livi-url-group {
    margin-top: 15px;
}

.livi-url-group--destination {
    padding-top: 14px;
    border-top: 1px solid var(--livi-border, #e4e7ec);
}

.livi-qr-caption {
    max-width: 202px;
    margin: 10px 0 0;
    color: var(--livi-muted, #667085);
    font-size: .76rem;
    line-height: 1.45;
    text-align: center;
}

.livi-preview-card__content {
    min-width: 0;
}

.livi-preview-destination-label {
    margin-top: 16px;
}

.livi-preview-card code {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.livi-activity-stats {
    margin-bottom: 22px;
}

.livi-activity-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(135px, 1fr));
    gap: 14px;
    align-items: end;
}

.livi-activity-filters label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.livi-activity-filters label > span {
    color: var(--livi-muted, #667085);
    font-size: .78rem;
    font-weight: 700;
}

.livi-activity-filters__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.livi-source {
    padding: 5px 9px;
    display: inline-flex;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 750;
    white-space: nowrap;
}

.livi-source--qr {
    color: #0c1c4d;
    background: #e9eefb;
}

.livi-source--link {
    color: #175cd3;
    background: #eff8ff;
}

.livi-source--direct {
    color: #475467;
    background: #f2f4f7;
}

.livi-status--redirected {
    color: #067647;
    background: #ecfdf3;
}

.livi-status--expired,
.livi-status--used,
.livi-status--inactive,
.livi-status--invalid_code {
    color: #b42318;
    background: #fef3f2;
}

.livi-pagination {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.livi-pagination .page-numbers {
    min-width: 36px;
    min-height: 36px;
    padding: 7px 10px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--livi-border, #e4e7ec);
    border-radius: 8px;
    text-decoration: none;
}

.livi-pagination .current {
    color: #fff;
    background: #0c1c4d;
    border-color: #0c1c4d;
}

@media (max-width: 1100px) {
    .livi-activity-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .livi-activity-filters {
        grid-template-columns: 1fr;
    }
}

.livi-shopify-config-summary {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(12, 28, 77, .12);
    border-radius: 10px;
    background: rgba(12, 28, 77, .04);
    font-size: .9rem;
}

.livi-shopify-test-card {
    margin-bottom: 1.25rem;
}

.livi-shopify-test-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.livi-shopify-test-grid > div {
    padding: 12px 14px;
    border: 1px solid rgba(12, 28, 77, .12);
    border-radius: 10px;
    background: rgba(12, 28, 77, .035);
}

.livi-shopify-test-label {
    display: block;
    margin-bottom: 3px;
    color: #667085;
    font-size: .78rem;
}

.livi-shopify-test-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.livi-shopify-test-form small {
    color: #667085;
}

@media (max-width: 620px) {
    .livi-shopify-test-grid {
        grid-template-columns: 1fr;
    }
}

.livi-referral-details dd {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* HCP user management actions */
.livi-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.livi-row-actions form {
    margin: 0;
}

.livi-button--warning {
    color: #93370d;
    background: #fffaeb;
    border-color: #fedf89;
}

.livi-button--warning:hover,
.livi-button--warning:focus-visible {
    color: #7a2e0e;
    background: #fef0c7;
    border-color: #fec84b;
}

.livi-button--danger {
    color: #b42318;
    background: #fff;
    border-color: #fda29b;
}

.livi-button--danger:hover,
.livi-button--danger:focus-visible {
    color: #fff;
    background: #b42318;
    border-color: #b42318;
}


.livi-source--shopify {
    color: #6941c6;
    background: #f4f3ff;
}

.livi-status--converted {
    color: #067647;
    background: #ecfdf3;
}

/* v0.6.0: multiple Tear Pad referral codes */
.livi-hcp-summary-card {
    margin-bottom: 22px;
    border-top: 4px solid #0c1c4d;
}

.livi-code-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    color: #0c1c4d;
    background: #e9eefb;
    font-size: .8rem;
    font-weight: 750;
}

.livi-tear-pad-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.livi-tear-pad-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--livi-border, #e4e7ec);
    border-radius: 14px;
    background: #fff;
}

.livi-tear-pad-card__head,
.livi-tear-pad-card__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.livi-tear-pad-number {
    display: block;
    margin-bottom: 4px;
    color: var(--livi-muted, #667085);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.livi-tear-pad-code {
    display: block;
    color: #0c1c4d;
    overflow-wrap: anywhere;
    font-size: 1rem;
}

.livi-tear-pad-card__body {
    margin-top: 16px;
    justify-content: flex-start;
}

.livi-qr-box--tear {
    width: 150px;
    min-width: 150px;
    min-height: 150px;
}

.livi-qr-box--tear img,
.livi-qr-box--tear canvas {
    width: 128px !important;
    height: 128px !important;
}

.livi-tear-pad-meta {
    padding-top: 4px;
}

.livi-tear-pad-meta p {
    margin: 0 0 8px;
    color: var(--livi-muted, #667085);
    font-size: .82rem;
}

.livi-status--used,
.livi-status--expired {
    color: #b42318;
    background: #fef3f2;
}

@media (max-width: 980px) {
    .livi-tear-pad-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .livi-tear-pad-card__head,
    .livi-tear-pad-card__body {
        flex-direction: column;
    }
}

.livi-hcp-summary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* v0.7.0: Shopify HCP sample submissions. */
.livi-submissions-header {
    align-items: center;
}

.livi-submissions-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 110px;
}

.livi-submissions-count strong {
    font-size: 1.65rem;
    line-height: 1;
}

.livi-submissions-count span {
    color: #667085;
    font-size: .78rem;
}

.livi-submissions-filter {
    margin-bottom: 20px;
}

.livi-submissions-filter label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.livi-submissions-table {
    min-width: 1320px;
}

.livi-submission-status-form {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
}

.livi-submission-status-form select {
    min-width: 145px;
    max-width: 170px;
    padding: 7px 28px 7px 9px;
    font-size: .78rem;
}

.livi-status--new_submission {
    color: #7a4d00;
    background: #fff5d6;
}

.livi-status--fulfilled {
    color: #176b3a;
    background: #e6f7ed;
}

.livi-status--not_approved {
    color: #9f2d2d;
    background: #fdecec;
}

@media (max-width: 767px) {
    .livi-submissions-header {
        align-items: flex-start;
    }

    .livi-submissions-count {
        align-items: flex-start;
    }
}