/**
 * React Admin Panel - Admin Styles
 * Version: 8.0.0
 */

/* ── Variables ──────────────────────────────────────────────────────────────── */
:root {
    --rap-primary:        #2271b1;
    --rap-primary-hover:  #135e96;
    --rap-primary-light:  #eaf1f8;
    --rap-success:        #008a20;
    --rap-success-light:  #edf9f0;
    --rap-warning:        #c07b00;
    --rap-warning-light:  #fef8ec;
    --rap-error:          #cc1818;
    --rap-error-light:    #fdf2f2;
    --rap-border:         #dcdcde;
    --rap-bg:             #f6f7f7;
    --rap-bg-card:        #ffffff;
    --rap-text:           #1d2327;
    --rap-text-muted:     #50575e;
    --rap-text-faint:     #8c8f94;
    --rap-shadow-sm:      0 1px 3px rgba(0,0,0,.07);
    --rap-shadow:         0 2px 8px rgba(0,0,0,.09);
    --rap-shadow-md:      0 4px 18px rgba(0,0,0,.11);
    --rap-radius:         6px;
    --rap-radius-lg:      10px;
    --rap-transition:     all .18s ease;
}

/* ── Toast notifications ────────────────────────────────────────────────────── */
.rap-toast-container {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.rap-toast {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: var(--rap-radius);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    box-shadow: var(--rap-shadow-md);
    pointer-events: auto;
    animation: rap-toast-in .22s ease;
    max-width: 320px;
    line-height: 1.4;
}
.rap-toast-success { background: #1a5e2e; }
.rap-toast-error   { background: #7e1212; }

.rap-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    font-size: 11px;
    flex-shrink: 0;
}

@keyframes rap-toast-in {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ── Page wrapper — centers the h1 title + panel together ───────────────────── */
.rap-page-wrap {
    max-width: 1400px;
    margin: 0 auto;
}

/* ── App shell ──────────────────────────────────────────────────────────────── */
.rap-app {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.rap-panel {
    margin-top: 16px;
}

/* ── States ─────────────────────────────────────────────────────────────────── */
.rap-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 24px;
    color: var(--rap-text-muted);
    font-size: 14px;
}

.rap-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--rap-radius);
    font-size: 13px;
    margin: 16px 0;
}
.rap-notice-error {
    background: var(--rap-error-light);
    border-left: 4px solid var(--rap-error);
    color: var(--rap-error);
}

.rap-empty {
    padding: 12px 0;
    color: var(--rap-text-faint);
    font-size: 13px;
}
.rap-empty-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    gap: 12px;
    text-align: center;
}
.rap-empty-icon { font-size: 36px; opacity: .55; }

/* ── Spinners ───────────────────────────────────────────────────────────────── */
.rap-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--rap-border);
    border-top-color: var(--rap-primary);
    border-radius: 50%;
    animation: rap-spin .65s linear infinite;
    flex-shrink: 0;
}

.rap-spinner-sm {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rap-spin .65s linear infinite;
    vertical-align: middle;
}

@keyframes rap-spin { to { transform: rotate(360deg); } }

/* ── Fallback tab bar ───────────────────────────────────────────────────────── */
.rap-nav-tabs {
    display: flex;
    gap: 2px;
    padding: 0 6px;
    background: var(--rap-bg);
    border-bottom: 1px solid var(--rap-border);
    border-radius: var(--rap-radius-lg) var(--rap-radius-lg) 0 0;
}

.rap-nav-tab {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rap-text-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: var(--rap-radius) var(--rap-radius) 0 0;
    cursor: pointer;
    transition: var(--rap-transition);
    margin-bottom: -1px;
    letter-spacing: .01em;
}
.rap-nav-tab:hover       { color: var(--rap-primary); background: var(--rap-primary-light); }
.rap-nav-tab.is-active   { color: var(--rap-primary); border-bottom-color: var(--rap-primary); background: #fff; }

/* ── WordPress TabPanel overrides ──────────────────────────────────────────── */
.rap-tabs .components-tab-panel__tabs {
    display: flex;
    gap: 2px;
    padding: 0 6px;
    background: var(--rap-bg);
    border-bottom: 1px solid var(--rap-border);
    border-radius: var(--rap-radius-lg) var(--rap-radius-lg) 0 0;
}

.rap-tabs .components-tab-panel__tabs-item {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rap-text-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: var(--rap-radius) var(--rap-radius) 0 0;
    cursor: pointer;
    transition: var(--rap-transition);
    margin-bottom: -1px;
    letter-spacing: .01em;
}
.rap-tabs .components-tab-panel__tabs-item:hover     { color: var(--rap-primary); background: var(--rap-primary-light); }
.rap-tabs .components-tab-panel__tabs-item.is-active { color: var(--rap-primary); border-bottom-color: var(--rap-primary); background: #fff; box-shadow: none; }

/* ── Tab body ───────────────────────────────────────────────────────────────── */
.rap-tab-body {
    background: var(--rap-bg-card);
    border: 1px solid var(--rap-border);
    border-top: none;
    border-radius: 0 0 var(--rap-radius-lg) var(--rap-radius-lg);
    padding: 28px;
}

/* ── Toolbar (stats + search) ───────────────────────────────────────────────── */
.rap-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.rap-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rap-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--rap-bg);
    color: var(--rap-text-muted);
    border: 1px solid var(--rap-border);
}
.rap-chip-primary { background: var(--rap-primary-light);  color: var(--rap-primary);  border-color: rgba(34,113,177,.2); }
.rap-chip-success { background: var(--rap-success-light);  color: var(--rap-success);  border-color: rgba(0,138,32,.2); }
.rap-chip-warning { background: var(--rap-warning-light);  color: var(--rap-warning);  border-color: rgba(192,123,0,.2); }

.rap-search {
    padding: 8px 14px;
    font-size: 13px;
    border: 1px solid var(--rap-border);
    border-radius: var(--rap-radius);
    background: var(--rap-bg);
    color: var(--rap-text);
    min-width: 220px;
    outline: none;
    transition: var(--rap-transition);
}
.rap-search:focus {
    border-color: var(--rap-primary);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(34,113,177,.15);
}
.rap-search::placeholder { color: var(--rap-text-faint); }

/* ── Icon toggle grid ───────────────────────────────────────────────────────── */
.rap-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 10px;
}

.rap-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: var(--rap-bg-card);
    border: 1px solid var(--rap-border);
    border-radius: var(--rap-radius);
    transition: var(--rap-transition);
}
.rap-toggle-item:hover   { border-color: var(--rap-primary); box-shadow: var(--rap-shadow-sm); }
.rap-toggle-item.is-enabled {
    border-color: rgba(34,113,177,.25);
    background: var(--rap-primary-light);
}

.rap-toggle-item-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.rap-toggle-item-inner .components-toggle-control          { margin-bottom: 0; flex: 1; }
.rap-toggle-item-inner .components-base-control__field     { margin-bottom: 0; }
.rap-toggle-item-inner .components-flex                    { align-items: center; }

/* Custom fallback toggle */
.rap-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.rap-toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.rap-toggle-track {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    background: #c3c4c7;
    border-radius: 11px;
    transition: background .2s ease;
    flex-shrink: 0;
}
.rap-toggle-switch input:checked ~ .rap-toggle-track { background: var(--rap-primary); }

.rap-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.22);
    transition: transform .2s ease;
}
.rap-toggle-switch input:checked ~ .rap-toggle-track .rap-toggle-thumb {
    transform: translateX(16px);
}

.rap-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--rap-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rap-preview-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    color: var(--rap-primary);
    background: var(--rap-primary-light);
    border: 1px solid rgba(34,113,177,.2);
    border-radius: var(--rap-radius);
    transition: var(--rap-transition);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .01em;
}
.rap-preview-btn:hover {
    background: var(--rap-primary);
    color: #fff;
    border-color: var(--rap-primary);
    text-decoration: none;
}

/* ── Plugin grid ────────────────────────────────────────────────────────────── */
.rap-plugins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
}

/* ── Plugin card ────────────────────────────────────────────────────────────── */
.rap-plugin-card {
    display: flex;
    flex-direction: column;
    background: var(--rap-bg-card);
    border: 1px solid var(--rap-border);
    border-radius: var(--rap-radius-lg);
    overflow: hidden;
    transition: var(--rap-transition);
    position: relative;
}
.rap-plugin-card:hover {
    box-shadow: var(--rap-shadow-md);
    border-color: rgba(34,113,177,.3);
    transform: translateY(-2px);
}

/* Active accent bar */
.rap-plugin-card.is-active::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--rap-success);
    border-radius: var(--rap-radius-lg) var(--rap-radius-lg) 0 0;
}
.rap-plugin-card.is-active  { border-color: rgba(0,138,32,.25); }
.rap-plugin-card.is-installed { border-color: rgba(192,123,0,.25); }

.rap-plugin-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 14px;
}

/* Icon wrapper — flex-center so small images don't hug a corner */
.rap-plugin-icon-wrap {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rap-radius);
    background: var(--rap-bg);
    border: 1px solid var(--rap-border);
    overflow: hidden;
}

.rap-plugin-icon {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}

.rap-plugin-icon-fallback {
    width: 56px;
    height: 56px;
    border-radius: var(--rap-radius);
    background: linear-gradient(135deg, var(--rap-primary), var(--rap-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.rap-plugin-header {
    flex: 1;
    min-width: 0;
}

.rap-plugin-name {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--rap-text);
    line-height: 1.4;
}

.rap-plugin-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Body section — description, woo badge, details link */
.rap-plugin-body {
    padding: 0 18px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.rap-plugin-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--rap-text-muted);
    line-height: 1.65;
}

.rap-plugin-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    border-top: 1px solid var(--rap-border);
    background: var(--rap-bg);
    gap: 10px;
    margin-top: auto;
}

/* Details link — sits below the short description */
.rap-details-link {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rap-primary);
    text-decoration: none;
    letter-spacing: .01em;
    transition: var(--rap-transition);
}
.rap-details-link:hover {
    color: var(--rap-primary-hover);
    text-decoration: underline;
}
/* Extra breathing room only when the link follows the badge */
.rap-woo-badge + .rap-details-link {
    margin-top: 6px;
}

/* ── Star rating ────────────────────────────────────────────────────────────── */
.rap-star-rating {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.rap-star {
    font-size: 15px;
    color: #dcdcde;
    line-height: 1;
    user-select: none;
}
.rap-star.rap-star-on { color: #f0b429; }

/* ── WooCommerce required badge ─────────────────────────────────────────────── */
.rap-woo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #7f54b3;
    background: #f3eeff;
    border: 1px solid rgba(127, 84, 179, .2);
    border-radius: var(--rap-radius);
    line-height: 1;
}
.rap-woo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: #7f54b3;
    border-radius: 3px;
    flex-shrink: 0;
    letter-spacing: 0;
}

/* ── Status badge ───────────────────────────────────────────────────────────── */
.rap-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
}
.rap-badge-active {
    background: var(--rap-success-light);
    color: var(--rap-success);
}
.rap-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rap-success);
    animation: rap-pulse 2s infinite;
}
@keyframes rap-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .45; }
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.rap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: var(--rap-radius);
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--rap-transition);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: .02em;
}
.rap-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.rap-btn-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rap-btn-primary {
    background: var(--rap-primary);
    color: #fff;
    border-color: var(--rap-primary);
}
.rap-btn-primary:hover:not(:disabled) {
    background: var(--rap-primary-hover);
    border-color: var(--rap-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(34,113,177,.3);
}

.rap-btn-outline {
    background: #fff;
    color: var(--rap-primary);
    border-color: var(--rap-primary);
}
.rap-btn-outline:hover:not(:disabled) {
    background: var(--rap-primary);
    color: #fff;
    transform: translateY(-1px);
}

.rap-btn-lg {
    padding: 10px 28px;
    font-size: 13.5px;
}

/* ── Footer / save bar ──────────────────────────────────────────────────────── */
.rap-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 16px 22px;
    background: var(--rap-bg-card);
    border: 1px solid var(--rap-border);
    border-radius: var(--rap-radius-lg);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 782px) {
    .rap-icon-grid,
    .rap-plugins-grid { grid-template-columns: 1fr; }

    .rap-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .rap-search { width: 100%; min-width: unset; }

    .rap-tab-body { padding: 16px; }

    .rap-nav-tab,
    .rap-tabs .components-tab-panel__tabs-item { padding: 10px 12px; font-size: 12px; }

    .rap-footer { padding: 12px 16px; }
}

@media screen and (max-width: 480px) {
    .rap-toggle-item { flex-wrap: wrap; }
    .rap-preview-btn { margin-top: 6px; }

    .rap-toast-container { bottom: 12px; right: 12px; left: 12px; }
    .rap-toast { max-width: unset; }
}

/* ── WordPress admin compatibility ──────────────────────────────────────────── */
.wp-core-ui .rap-panel .button-link { color: var(--rap-primary); }