/* ============================================================
   ContentSERP V2 — COMPONENTS (1/3) buttons + forms
   ============================================================ */

/* ── Buttons ─────────────────────────────────────────── */
.cs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--cs-space-2);
    font-family: var(--cs-font-family);
    font-size: var(--cs-font-size-sm); font-weight: 600;
    padding: var(--cs-space-2) var(--cs-space-4);
    border-radius: var(--cs-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s ease;
    white-space: nowrap;
    text-decoration: none;
}
.cs-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cs-btn--primary { background: var(--cs-primary); color: #fff; box-shadow: var(--cs-shadow-sm); }
.cs-btn--primary:hover:not(:disabled) { background: var(--cs-primary-hover); }
.cs-btn--secondary { background: var(--cs-surface); color: var(--cs-text); border-color: var(--cs-border-strong); }
.cs-btn--secondary:hover:not(:disabled) { background: var(--cs-surface-muted); }
.cs-btn--ghost { background: transparent; color: var(--cs-text-secondary); }
.cs-btn--ghost:hover:not(:disabled) { background: var(--cs-surface-muted); color: var(--cs-text); }
.cs-btn--danger { background: var(--cs-danger); color: #fff; }
.cs-btn--success { background: var(--cs-success); color: #fff; }
.cs-btn--sm { padding: var(--cs-space-1) var(--cs-space-3); font-size: var(--cs-font-size-xs); }
.cs-btn--lg { padding: var(--cs-space-3) var(--cs-space-6); font-size: var(--cs-font-size-md); }
.cs-btn__spinner {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
    animation: cs-spin 0.7s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }

/* ── Forms ───────────────────────────────────────────── */
.cs-field { display: flex; flex-direction: column; gap: var(--cs-space-1); min-width: 0; }
.cs-field__label { font-size: var(--cs-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cs-text-secondary); }
.cs-input, .cs-select {
    font-family: var(--cs-font-family); font-size: var(--cs-font-size-md);
    padding: var(--cs-space-2) var(--cs-space-3);
    border: 1px solid var(--cs-border-strong); border-radius: var(--cs-radius-sm);
    background: var(--cs-surface); color: var(--cs-text);
    width: 100%; min-width: 0;
}
.cs-input:focus, .cs-select:focus { border-color: var(--cs-primary); }
.cs-input[aria-invalid="true"], .cs-select[aria-invalid="true"] { border-color: var(--cs-danger); }
.cs-field__hint { font-size: var(--cs-font-size-xs); color: var(--cs-text-muted); }
.cs-field__error { font-size: var(--cs-font-size-xs); color: var(--cs-danger); }

/* ── Cards ───────────────────────────────────────────── */
.cs-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    box-shadow: var(--cs-shadow-sm);
    overflow: hidden;
}
.cs-card__header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-3);
    padding: var(--cs-space-3) var(--cs-space-4);
    border-bottom: 1px solid var(--cs-border);
    font-weight: 700; font-size: var(--cs-font-size-sm);
}
.cs-card__header .cs-card__title { display: flex; align-items: center; gap: var(--cs-space-2); }
.cs-card__body { padding: var(--cs-space-4); }
.cs-card--metric { background: var(--cs-surface-muted); }
.cs-card--status { border-left: 3px solid var(--cs-border-strong); }
.cs-card--interactive:hover { box-shadow: var(--cs-shadow-md); }

/* ── Badges ──────────────────────────────────────────── */
.cs-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: 99px;
    font-size: var(--cs-font-size-xs); font-weight: 600;
    background: var(--cs-surface-muted); color: var(--cs-text-secondary);
    border: 1px solid var(--cs-border);
    white-space: nowrap;
}
.cs-badge--success { background: var(--cs-success-soft); color: #065f46; border-color: #a7f3d0; }
.cs-badge--warning { background: var(--cs-warning-soft); color: #92400e; border-color: #fde68a; }
.cs-badge--danger  { background: var(--cs-danger-soft);  color: #991b1b; border-color: #fecaca; }
.cs-badge--info    { background: var(--cs-info-soft);    color: #075985; border-color: #bae6fd; }

/* ── Tabs ────────────────────────────────────────────── */
.cs-tabs { display: flex; gap: var(--cs-space-1); border-bottom: 1px solid var(--cs-border); overflow-x: auto; }
.cs-tabs__tab {
    appearance: none; background: none; border: none; cursor: pointer;
    font-family: var(--cs-font-family); font-size: var(--cs-font-size-sm); font-weight: 600;
    color: var(--cs-text-secondary);
    padding: var(--cs-space-2) var(--cs-space-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.cs-tabs__tab:hover { color: var(--cs-text); }
.cs-tabs__tab[aria-selected="true"] { color: var(--cs-primary); border-bottom-color: var(--cs-primary); }
.cs-tabs__tab:focus-visible { outline-offset: -2px; }

/* ── DataTable ───────────────────────────────────────── */
.cs-table-wrap { overflow-x: auto; }
.cs-table { width: 100%; border-collapse: collapse; font-size: var(--cs-font-size-sm); }
.cs-table th {
    text-align: left; font-size: var(--cs-font-size-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--cs-text-muted);
    padding: var(--cs-space-2) var(--cs-space-3);
    border-bottom: 1px solid var(--cs-border);
    background: var(--cs-surface-muted);
    white-space: nowrap;
}
.cs-table td { padding: var(--cs-space-2) var(--cs-space-3); border-bottom: 1px solid var(--cs-border); vertical-align: top; }
.cs-table tbody tr:hover { background: var(--cs-surface-muted); }
.cs-table .cs-table__num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── State blocks ────────────────────────────────────── */
.cs-state { display: flex; flex-direction: column; align-items: center; gap: var(--cs-space-2); text-align: center; padding: var(--cs-space-8) var(--cs-space-4); color: var(--cs-text-secondary); }
.cs-state__icon { font-size: 28px; }
.cs-state__title { font-weight: 700; color: var(--cs-text); }
.cs-state__text { font-size: var(--cs-font-size-sm); max-width: 420px; }
.cs-state__action { margin-top: var(--cs-space-2); }

.cs-skeleton { border-radius: var(--cs-radius-sm); background: linear-gradient(90deg, var(--cs-surface-muted) 25%, #e2e8f0 50%, var(--cs-surface-muted) 75%); background-size: 200% 100%; animation: cs-shimmer 1.4s infinite; }
@keyframes cs-shimmer { to { background-position: -200% 0; } }
.cs-skeleton--line { height: 14px; margin-bottom: var(--cs-space-2); }
.cs-skeleton--card { height: 120px; }

/* ── Alerts / Toasts ─────────────────────────────────── */
.cs-alert { display: flex; gap: var(--cs-space-3); padding: var(--cs-space-3) var(--cs-space-4); border-radius: var(--cs-radius-sm); border: 1px solid var(--cs-border); background: var(--cs-surface-muted); font-size: var(--cs-font-size-sm); }
.cs-alert--success { background: var(--cs-success-soft); border-color: #a7f3d0; color: #065f46; }
.cs-alert--warning { background: var(--cs-warning-soft); border-color: #fde68a; color: #92400e; }
.cs-alert--danger  { background: var(--cs-danger-soft);  border-color: #fecaca; color: #991b1b; }
.cs-alert--info    { background: var(--cs-info-soft);    border-color: #bae6fd; color: #075985; }

.cs-toast-region { position: fixed; top: var(--cs-space-4); right: var(--cs-space-4); z-index: 3000; display: flex; flex-direction: column; gap: var(--cs-space-2); max-width: 360px; }
.cs-toast { background: var(--cs-navy-2); color: #e2e8f0; padding: var(--cs-space-3) var(--cs-space-4); border-radius: var(--cs-radius-sm); box-shadow: var(--cs-shadow-lg); font-size: var(--cs-font-size-sm); display: flex; gap: var(--cs-space-2); align-items: flex-start; }
.cs-toast--success { border-left: 3px solid var(--cs-success); }
.cs-toast--info    { border-left: 3px solid var(--cs-info); }
.cs-toast--warning { border-left: 3px solid var(--cs-warning); }
.cs-toast--error   { border-left: 3px solid var(--cs-danger); }
.cs-toast__close { background: none; border: none; color: #cbd5e1; cursor: pointer; font-size: 14px; margin-left: auto; padding: 0 2px; }

/* ── Modal ───────────────────────────────────────────── */
.cs-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--cs-space-4); }
.cs-modal { background: var(--cs-surface); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-lg); width: 100%; max-width: 560px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.cs-modal__header { display: flex; justify-content: space-between; align-items: center; padding: var(--cs-space-4); border-bottom: 1px solid var(--cs-border); font-weight: 700; }
.cs-modal__body { padding: var(--cs-space-4); overflow-y: auto; }
.cs-modal__footer { padding: var(--cs-space-3) var(--cs-space-4); border-top: 1px solid var(--cs-border); display: flex; justify-content: flex-end; gap: var(--cs-space-2); }

/* ── CreditBadge / ScoreRing ─────────────────────────── */
.cs-credit { display: inline-flex; align-items: center; gap: var(--cs-space-1); font-weight: 700; color: #e2e8f0; font-size: var(--cs-font-size-sm); }
.cs-credit--surface { color: var(--cs-text); }
.cs-score-ring { display: inline-flex; align-items: center; gap: var(--cs-space-2); }
.cs-score-ring svg { transform: rotate(-90deg); }
.cs-score-ring__value { font-weight: 800; font-size: var(--cs-font-size-lg); }

/* ── External link / chips ───────────────────────────── */
.cs-extlink { color: var(--cs-primary); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cs-extlink:hover { text-decoration: underline; }
.cs-chip { display: inline-block; background: var(--cs-surface-muted); border: 1px solid var(--cs-border); color: var(--cs-text-secondary); padding: 2px 10px; border-radius: 99px; font-size: var(--cs-font-size-xs); margin: 2px 4px 2px 0; overflow-wrap: anywhere; max-width: 100%; }