/*
 * CartRecovr Admin Styles
 * Clean, modern design — Inter font stack, no external requests
 * FluxWillow © 2026
 */

:root {
    --cr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --cr-navy:         #1B2D4F;
    --cr-blue:         #2563EB;
    --cr-blue-light:   #EFF6FF;
    --cr-blue-mid:     #DBEAFE;
    --cr-white:        #FFFFFF;
    --cr-bg:           #F8FAFC;
    --cr-border:       #E2E8F0;
    --cr-border-mid:   #CBD5E1;
    --cr-text:         #0F172A;
    --cr-text-mid:     #475569;
    --cr-text-soft:    #94A3B8;
    --cr-green:        #059669;
    --cr-green-bg:     #ECFDF5;
    --cr-green-border: #A7F3D0;
    --cr-red:          #DC2626;
    --cr-red-bg:       #FEF2F2;
    --cr-red-border:   #FECACA;
    --cr-amber:        #D97706;
    --cr-amber-bg:     #FFFBEB;
    --cr-amber-border: #FDE68A;
    --cr-purple:       #7C3AED;
    --cr-purple-bg:    #F5F3FF;
    --cr-radius:       10px;
    --cr-radius-sm:    6px;
    --cr-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --cr-shadow-md:    0 4px 12px rgba(0,0,0,.10);
}

/* ── Wrapper ─────────────────────────────────────────────────────────────────── */
.cr-wrap {
    font-family: var(--cr-font);
    max-width: 1180px;
    padding-right: 20px;
    color: var(--cr-text);
}

/* ── Page title ──────────────────────────────────────────────────────────────── */
.cr-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--cr-navy);
    margin: 16px 0 24px;
    letter-spacing: -.3px;
    font-family: var(--cr-font);
}
.cr-page-title .dashicons { font-size: 22px; width: 22px; height: 22px; color: var(--cr-blue); }
.cr-count {
    background: var(--cr-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    margin-left: 4px;
}

/* ── Stat row ────────────────────────────────────────────────────────────────── */
.cr-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.cr-stat-box {
    background: var(--cr-white);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    padding: 22px 20px 18px;
    box-shadow: var(--cr-shadow);
    position: relative;
    overflow: hidden;
}
.cr-stat-box::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--cr-border-mid);
}
.cr-stat-box.cr-stat-green::after  { background: var(--cr-green); }
.cr-stat-box.cr-stat-blue::after   { background: var(--cr-blue); }
.cr-stat-box.cr-stat-purple::after { background: var(--cr-purple); }
.cr-stat-number {
    font-size: 28px;
    font-weight: 800;
    color: var(--cr-navy);
    line-height: 1.1;
    letter-spacing: -.5px;
    margin-bottom: 6px;
    font-family: var(--cr-font);
}
.cr-stat-number .woocommerce-Price-amount,
.cr-stat-number .woocommerce-Price-currencySymbol {
    font-size: 28px;
    font-weight: 800;
    color: var(--cr-navy);
}
.cr-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cr-text-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-family: var(--cr-font);
}

/* ── Card ────────────────────────────────────────────────────────────────────── */
.cr-card {
    background: var(--cr-white);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    box-shadow: var(--cr-shadow);
    margin-bottom: 20px;
    overflow: hidden;
}
.cr-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cr-border);
    background: var(--cr-bg);
}
.cr-card-header h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--cr-navy);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-family: var(--cr-font);
}
.cr-card h2 {
    font-size: 14px;
    font-weight: 700;
    color: var(--cr-navy);
    padding: 20px 22px 4px;
    margin: 0;
    font-family: var(--cr-font);
}
.cr-card-header .button,
.cr-card-header a.button {
    font-size: 12px;
    font-weight: 600;
    height: 32px;
    line-height: 30px;
    padding: 0 14px;
    border-radius: var(--cr-radius-sm);
    font-family: var(--cr-font);
}

/* ── Table ────────────────────────────────────────────────────────────────────── */
.cr-table.widefat {
    border: none !important;
    box-shadow: none !important;
    font-family: var(--cr-font) !important;
    border-collapse: collapse !important;
    width: 100% !important;
}
.cr-table thead th {
    background: var(--cr-bg) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--cr-text-soft) !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--cr-border) !important;
    border-top: none !important;
    font-family: var(--cr-font) !important;
}
.cr-table tbody td {
    padding: 13px 16px !important;
    font-size: 13px !important;
    color: var(--cr-text) !important;
    border-bottom: 1px solid var(--cr-border) !important;
    vertical-align: middle !important;
    font-family: var(--cr-font) !important;
    line-height: 1.4 !important;
}
.cr-table tbody tr:last-child td { border-bottom: none !important; }
.cr-table tbody tr:hover td { background: var(--cr-blue-light) !important; }
.cr-table td strong { font-weight: 600; color: var(--cr-navy); }

/* ── Status badges ───────────────────────────────────────────────────────────── */
.cr-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-family: var(--cr-font);
    white-space: nowrap;
}
.cr-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cr-badge-pending      { background: var(--cr-amber-bg);  color: var(--cr-amber);  border: 1px solid var(--cr-amber-border);  }
.cr-badge-pending::before  { background: var(--cr-amber);  }
.cr-badge-abandoned    { background: var(--cr-red-bg);    color: var(--cr-red);    border: 1px solid var(--cr-red-border);    }
.cr-badge-abandoned::before{ background: var(--cr-red);    }
.cr-badge-recovered    { background: var(--cr-green-bg);  color: var(--cr-green);  border: 1px solid var(--cr-green-border);  }
.cr-badge-recovered::before{ background: var(--cr-green);  }
.cr-badge-expired,
.cr-badge-cancelled    { background: var(--cr-bg);        color: var(--cr-text-soft); border: 1px solid var(--cr-border); }
.cr-badge-expired::before,
.cr-badge-cancelled::before{ background: var(--cr-text-soft); }
.cr-badge-unsubscribed { background: var(--cr-purple-bg); color: var(--cr-purple); border: 1px solid #DDD6FE;              }
.cr-badge-unsubscribed::before { background: var(--cr-purple); }
.cr-badge-skipped_free,
.cr-badge-skipped_targeting { background: var(--cr-bg); color: var(--cr-text-soft); border: 1px solid var(--cr-border); }
.cr-badge-skipped_free::before,
.cr-badge-skipped_targeting::before { background: var(--cr-text-soft); }
.cr-badge-sent       { background: var(--cr-blue-light); color: var(--cr-blue); border: 1px solid var(--cr-blue-mid); }
.cr-badge-sent::before { background: var(--cr-blue); }
.cr-badge-failed     { background: var(--cr-red-bg); color: var(--cr-red); border: 1px solid var(--cr-red-border); }
.cr-badge-failed::before { background: var(--cr-red); }

/* ── Filters ─────────────────────────────────────────────────────────────────── */
.cr-filters {
    background: var(--cr-white);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: var(--cr-shadow);
}
.cr-filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cr-filter-row select,
.cr-filter-row input[type="email"],
.cr-filter-row input[type="text"] {
    height: 36px;
    border: 1px solid var(--cr-border-mid);
    border-radius: var(--cr-radius-sm);
    padding: 0 12px;
    font-size: 13px;
    font-family: var(--cr-font);
    color: var(--cr-text);
    background: var(--cr-white);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.cr-filter-row select:focus,
.cr-filter-row input:focus {
    border-color: var(--cr-blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.cr-filter-row .button {
    height: 36px !important;
    line-height: 34px !important;
    font-family: var(--cr-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--cr-radius-sm) !important;
    padding: 0 16px !important;
}

/* ── Action buttons ──────────────────────────────────────────────────────────── */
.cr-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cr-actions .button {
    font-size: 11px !important;
    font-weight: 600 !important;
    height: 28px !important;
    line-height: 26px !important;
    padding: 0 10px !important;
    border-radius: var(--cr-radius-sm) !important;
    font-family: var(--cr-font) !important;
    transition: all .15s !important;
}
.button.cr-sent {
    background: var(--cr-green-bg) !important;
    color: var(--cr-green) !important;
    border-color: var(--cr-green-border) !important;
    pointer-events: none;
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.cr-empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--cr-text-soft);
    font-size: 14px;
    font-family: var(--cr-font);
    line-height: 1.6;
}
.cr-empty-icon { font-size: 40px; display: block; margin-bottom: 14px; }

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.cr-pagination {
    padding: 14px 20px;
    border-top: 1px solid var(--cr-border);
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--cr-bg);
}
.cr-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--cr-border-mid);
    border-radius: var(--cr-radius-sm);
    color: var(--cr-text-mid);
    text-decoration: none;
    font-size: 13px;
    font-family: var(--cr-font);
    font-weight: 500;
    transition: all .15s;
}
.cr-pagination .page-numbers:hover { border-color: var(--cr-blue); color: var(--cr-blue); background: var(--cr-blue-light); }
.cr-pagination .page-numbers.current { background: var(--cr-blue); color: #fff; border-color: var(--cr-blue); }

/* ── Settings ────────────────────────────────────────────────────────────────── */
.cr-settings-table {
    width: 100%;
    padding: 8px 22px 0;
    border-collapse: collapse;
}
.cr-settings-table th {
    width: 240px;
    padding: 16px 0;
    vertical-align: top;
    font-size: 13px;
    font-weight: 600;
    color: var(--cr-navy);
    font-family: var(--cr-font);
    border-bottom: 1px solid var(--cr-border);
}
.cr-settings-table td {
    padding: 12px 0 12px 20px;
    font-family: var(--cr-font);
    border-bottom: 1px solid var(--cr-border);
}
.cr-settings-table tr:last-of-type th,
.cr-settings-table tr:last-of-type td { border-bottom: none; }
.cr-settings-table .description {
    display: block;
    color: var(--cr-text-soft);
    font-size: 12px;
    margin-top: 5px;
    line-height: 1.5;
}
.cr-settings-table input[type="text"],
.cr-settings-table input[type="email"],
.cr-settings-table input[type="number"],
.cr-settings-table input.regular-text {
    height: 38px;
    border: 1px solid var(--cr-border-mid);
    border-radius: var(--cr-radius-sm);
    padding: 0 12px;
    font-size: 13px;
    font-family: var(--cr-font);
    color: var(--cr-text);
    background: var(--cr-white);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
}
.cr-settings-table input:focus {
    border-color: var(--cr-blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.cr-settings-table .small-text { max-width: 110px !important; }
.cr-settings-table .submit {
    padding: 18px 22px;
    border-top: 1px solid var(--cr-border);
    margin: 8px -22px 0;
    background: var(--cr-bg);
}
.cr-settings-table .submit .button-primary {
    height: 38px;
    line-height: 36px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--cr-font);
    border-radius: var(--cr-radius-sm);
    background: var(--cr-blue);
    border-color: var(--cr-blue);
    letter-spacing: -.1px;
    transition: background .15s;
}
.cr-settings-table .submit .button-primary:hover { background: #1D4ED8; border-color: #1D4ED8; }

/* ── Upgrade banner ──────────────────────────────────────────────────────────── */
.cr-upgrade-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cr-navy);
    background-image: radial-gradient(ellipse at top right, #2563EB 0%, transparent 55%);
    color: #fff;
    border-radius: var(--cr-radius);
    padding: 22px 28px;
    margin-bottom: 20px;
    gap: 24px;
    box-shadow: var(--cr-shadow-md);
}
.cr-upgrade-text strong { font-size: 15px; font-weight: 700; display: block; margin-bottom: 5px; letter-spacing: -.1px; }
.cr-upgrade-text p { margin: 0; font-size: 13px; opacity: .75; line-height: 1.5; }
.cr-upgrade-btn {
    background: #fff !important;
    color: var(--cr-navy) !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    height: 38px !important;
    line-height: 36px !important;
    padding: 0 22px !important;
    border-radius: var(--cr-radius-sm) !important;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
    font-family: var(--cr-font) !important;
    text-decoration: none;
    transition: all .15s !important;
}
.cr-upgrade-btn:hover { background: #EFF6FF !important; color: var(--cr-blue) !important; }

/* ── Notice ──────────────────────────────────────────────────────────────────── */
.cr-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--cr-radius-sm);
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--cr-font);
}
.cr-notice.success { background: var(--cr-green-bg); border: 1px solid var(--cr-green-border); color: var(--cr-green); }
.cr-notice.error   { background: var(--cr-red-bg);   border: 1px solid var(--cr-red-border);   color: var(--cr-red); }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) { .cr-stat-row { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 640px)  { .cr-stat-row { grid-template-columns: 1fr; } .cr-upgrade-banner { flex-direction: column; align-items: flex-start; } }