/**
 * SwapAds Client Plugin — Admin UI styles.
 *
 * Per UX guidelines (2026-07-30): design tokens, accessibility, feedback.
 * Loaded only on SwapAds admin pages (admin_enqueue_scripts with screen check).
 */

/* ===== Design Tokens (UX-DESIGN-SYSTEM.md) ===== */
:root {
    --swapads-primary: #1976d2;
    --swapads-secondary: #9c27b0;
    --swapads-error: #d32f2f;
    --swapads-warning: #ff9800;
    --swapads-success: #388e3c;
    --swapads-muted: #9e9e9e;
    --swapads-border: #e0e0e0;
    --swapads-bg-hover: #f5f5f5;
}

/* ===== Page footer (Consistency principle) ===== */
.swapads-page-footer {
    margin-top: 32px;
    padding: 16px 0;
    border-top: 1px solid var(--swapads-border);
    color: var(--swapads-muted);
    font-size: 12px;
}
.swapads-page-footer a {
    color: var(--swapads-primary);
    text-decoration: none;
}
.swapads-page-footer a:hover {
    text-decoration: underline;
}

/* ===== Loading skeleton (Feedback principle) ===== */
.swapads-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}
.swapads-skeleton-row {
    height: 16px;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.06) 25%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.06) 75%
    );
    background-size: 200% 100%;
    animation: swapads-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 3px;
}
@keyframes swapads-skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.swapads-skeleton-card  { background: #fff; border: 1px solid var(--swapads-border); border-radius: 4px; }
.swapads-skeleton-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.swapads-skeleton-tiles .swapads-skeleton-row { height: 80px; }
.swapads-skeleton-table .swapads-skeleton-row { height: 40px; }

/* ===== Empty state (UX-SPEC §1.4) ===== */
.swapads-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #555;
    background: #fafafa;
    border: 1px dashed var(--swapads-border);
    border-radius: 4px;
}
.swapads-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.6;
}
.swapads-empty-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}
.swapads-empty-body {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #666;
}

/* ===== Help icon (Discovery principle) ===== */
.swapads-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    background: var(--swapads-muted);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    cursor: help;
    user-select: none;
}
.swapads-help-icon:hover,
.swapads-help-icon:focus {
    background: var(--swapads-primary);
    outline: 2px solid var(--swapads-primary);
    outline-offset: 2px;
}

/* ===== Reset link button (Accessibility) ===== */
.swapads-button-link {
    background: none;
    border: none;
    color: var(--swapads-primary);
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    text-decoration: underline;
}
.swapads-button-link:hover {
    color: var(--swapads-error);
}
.swapads-button-link:focus {
    outline: 2px solid var(--swapads-primary);
    outline-offset: 2px;
}

/* ===== Tile grid (Operator Dashboard) ===== */
.swapads-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.swapads-metric-tile {
    background: #fff;
    border: 1px solid var(--swapads-border);
    border-radius: 4px;
    padding: 16px;
    text-align: center;
}
.swapads-metric-label {
    font-size: 12px;
    color: var(--swapads-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.swapads-metric-value {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
}
.swapads-metric-desc {
    font-size: 12px;
    color: var(--swapads-muted);
    margin-top: 4px;
}

/* ===== Card primitive (UX-SPEC §1.4) ===== */
.swapads-card {
    background: #fff;
    border: 1px solid var(--swapads-border);
    border-radius: 4px;
    padding: 16px 20px;
    margin: 16px 0;
}
.swapads-card > h2 {
    margin-top: 0;
    font-size: 16px;
    color: #222;
}
.swapads-card-warning {
    border-left: 4px solid var(--swapads-warning);
}
.swapads-card-error {
    border-left: 4px solid var(--swapads-error);
    background: #fff5f5;
}
.swapads-card-success {
    border-left: 4px solid var(--swapads-success);
}

/* ===== Client error notice (F198) ===== */
.swapads-client-error-notice {
    border-left: 4px solid var(--swapads-error);
}
.swapads-client-error-notice summary {
    color: var(--swapads-primary);
    cursor: pointer;
    font-size: 13px;
}

/* ===== Muted text ===== */
.swapads-muted {
    color: var(--swapads-muted);
    font-style: italic;
}

/* ===== Mobile responsiveness (UX-guidelines principle) ===== */
@media (max-width: 600px) {
    .swapads-metric-grid {
        grid-template-columns: 1fr;
    }
    .swapads-empty-state {
        padding: 24px 12px;
    }
}


/* ============================================
   F200: Tabbed Backlinks Hub UI
   ============================================ */

.swapads-tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #ccd0d4;
  margin: 16px 0 24px 0;
}
.swapads-tab {
  padding: 8px 16px;
  text-decoration: none;
  color: #50575e;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
}
.swapads-tab:hover { color: #2271b1; }
.swapads-tab--active {
  color: #2271b1;
  border-bottom-color: #2271b1;
}
.swapads-tab:focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Status pills on Your Backlinks list */
.swapads-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.swapads-status--active   { background: #dff5e0; color: #1a7f37; }
.swapads-status--paused   { background: #fff8c5; color: #9a6700; }
.swapads-status--depleted { background: #ffeef0; color: #b51c2c; }
.swapads-status--removed  { background: #f0f0f1; color: #50575e; text-decoration: line-through; }
.swapads-status--pending  { background: #ddf3ff; color: #0073aa; }


/* ============================================
   F119: Per-row reciprocal warning
   ============================================ */
.swapads-reciprocal-warning {
    margin-top: 6px;
    padding: 6px 10px;
    border-left: 3px solid #d63638;
    background: #fef7f7;
    color: #3a1a1a;
    font-size: 12px;
    line-height: 1.4;
}
.swapads-reciprocal-warning strong {
    color: #b32d2e;
}
.swapads-reciprocal-warning em {
    font-style: italic;
    font-weight: 600;
}
.swapads-row-warning {
    background: #fff8f8 !important;
}
@media (prefers-color-scheme: dark) {
    .swapads-reciprocal-warning {
        background: #2a1a1a;
        color: #f5d5d5;
        border-left-color: #d63638;
    }
    .swapads-reciprocal-warning strong {
        color: #f08889;
    }
    .swapads-row-warning {
        background: #2a1a1a !important;
    }
}


/* ============================================
   F122: Banner block editor preview
   ============================================ */
.swapads-block-preview {
    margin: 0;
    padding: 16px;
    border: 2px dashed #2271b1;
    background: #f0f6fc;
    border-radius: 4px;
}
.swapads-block-preview__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2271b1;
    font-weight: 600;
    margin-bottom: 8px;
}
.swapads-block-preview__bar {
    background: #fff;
    border: 1px solid #c3c4c7;
    padding: 24px;
    text-align: center;
    color: #50575e;
    font-style: italic;
    border-radius: 3px;
}
.swapads-block-preview__bar span {
    display: block;
}
.swapads-block.alignleft { margin-right: 16px; }
.swapads-block.alignright { margin-left: 16px; }
.swapads-block.aligncenter { text-align: center; margin: 0 auto; }
.swapads-block.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.swapads-block.alignfull { max-width: 100%; }

@media (prefers-color-scheme: dark) {
    .swapads-block-preview {
        background: #1d2327;
        border-color: #72aee6;
    }
    .swapads-block-preview__label {
        color: #72aee6;
    }
    .swapads-block-preview__bar {
        background: #2c3338;
        border-color: #50575e;
        color: #c3c4c7;
    }
}
