/*
 * gp-claim-modal.css
 *
 * Visual language matches the existing Gripar admin/dashboard:
 *   - White card, rounded corners, soft shadow on dark overlay
 *   - Indigo primary action (matches your existing CTA palette;
 *     swap --gp-claim-primary if your brand color differs)
 *   - Tabular candidate list with horizontal scroll fallback on
 *     narrow viewports
 *
 * Naming: BEM (gp-claim-cell, gp-claim-cell__badge--strong, etc.)
 * Scoping: all classes prefixed gp-claim-* — won't collide with the
 *          existing ft-modal / amm-modal styles.
 */

/* ─────────────────────────────────────────────────────────────────
 *  Design tokens
 * ───────────────────────────────────────────────────────────────── */
:root {
    --gp-claim-overlay:       rgba(15, 23, 42, 0.55);
    --gp-claim-bg:            #ffffff;
    --gp-claim-text:          #0f172a;
    --gp-claim-text-muted:    #64748b;
    --gp-claim-border:        #e2e8f0;
    --gp-claim-border-strong: #cbd5e1;
    --gp-claim-surface-soft:  #f8fafc;
    --gp-claim-primary:       #4f46e5;
    --gp-claim-primary-hover: #4338ca;
    --gp-claim-primary-text:  #ffffff;
    --gp-claim-ghost-text:    #475569;
    --gp-claim-ghost-hover:   #f1f5f9;
    --gp-claim-success:       #10b981;
    --gp-claim-error-bg:      #fef2f2;
    --gp-claim-error-text:    #991b1b;
    --gp-claim-error-border:  #fecaca;
    --gp-claim-badge-name-bg: #eef2ff;
    --gp-claim-badge-name-fg: #3730a3;
    --gp-claim-badge-strong-bg: #ecfdf5;
    --gp-claim-badge-strong-fg: #047857;
    --gp-claim-radius:        12px;
    --gp-claim-radius-sm:     8px;
    --gp-claim-shadow:        0 20px 60px rgba(15, 23, 42, 0.25);
    --gp-claim-z:             100000;
}

/* ─────────────────────────────────────────────────────────────────
 *  Body lock when modal is open
 * ───────────────────────────────────────────────────────────────── */
body.gp-claim-modal-open {
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────
 *  Overlay + container
 * ───────────────────────────────────────────────────────────────── */
.gp-claim-modal-wrapper {
    position: fixed;
    inset: 0;
    background: var(--gp-claim-overlay);
    z-index: var(--gp-claim-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: gp-claim-fade-in 160ms ease-out;
}

.gp-claim-modal-wrapper[hidden] {
    display: none !important;
}

@keyframes gp-claim-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gp-claim-modal {
    background: var(--gp-claim-bg);
    color: var(--gp-claim-text);
    border-radius: var(--gp-claim-radius);
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--gp-claim-shadow);
    position: relative;
    display: flex;
    flex-direction: column;
    animation: gp-claim-slide-up 200ms ease-out;
    outline: none;
}

@keyframes gp-claim-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gp-claim-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--gp-claim-text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, color 120ms ease;
    z-index: 1;
}

.gp-claim-modal__close:hover,
.gp-claim-modal__close:focus-visible {
    background: var(--gp-claim-ghost-hover);
    color: var(--gp-claim-text);
    outline: none;
}

.gp-claim-modal__body {
    padding: 28px 28px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ─────────────────────────────────────────────────────────────────
 *  Header
 * ───────────────────────────────────────────────────────────────── */
.gp-claim-header {
    margin: 0 0 20px;
    padding-right: 32px;
}

.gp-claim-header h2,
.gp-claim-empty h2,
.gp-claim-error h2,
.gp-claim-success h2 {
    margin: 0 0 8px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gp-claim-text);
}

.gp-claim-header__sub {
    margin: 0;
    color: var(--gp-claim-text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.gp-claim-header__sub strong {
    color: var(--gp-claim-text);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
 *  Candidates table
 * ───────────────────────────────────────────────────────────────── */
.gp-claim-table-wrap {
    margin-bottom: 20px;
    border: 1px solid var(--gp-claim-border);
    border-radius: var(--gp-claim-radius-sm);
    overflow-x: auto;        /* horizontal scroll on narrow viewports */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.gp-claim-table {
    width: 100%;
    min-width: 720px;        /* preserve table layout; overflow scrolls */
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--gp-claim-bg);
}

.gp-claim-table thead {
    background: var(--gp-claim-surface-soft);
}

.gp-claim-table th {
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    color: var(--gp-claim-text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--gp-claim-border);
    white-space: nowrap;
    vertical-align: middle;
}

.gp-claim-th--action {
    width: 1%;               /* shrink action column to button width */
}

.gp-claim-row {
    border-bottom: 1px solid var(--gp-claim-border);
    transition: background-color 120ms ease;
}

.gp-claim-table tbody tr:last-child {
    border-bottom: none;
}

.gp-claim-row:hover {
    background: var(--gp-claim-surface-soft);
}

.gp-claim-cell {
    padding: 12px 14px;
    vertical-align: middle;
    color: var(--gp-claim-text);
    line-height: 1.45;
    word-break: break-word;
}

.gp-claim-cell--name {
    min-width: 140px;
    white-space: nowrap;
}

.gp-claim-cell__name {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--gp-claim-text);
}

.gp-claim-cell__badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1.4;
}

.gp-claim-cell__badge--name {
    background: var(--gp-claim-badge-name-bg);
    color:      var(--gp-claim-badge-name-fg);
}

.gp-claim-cell__badge--strong {
    background: var(--gp-claim-badge-strong-bg);
    color:      var(--gp-claim-badge-strong-fg);
}

.gp-claim-cell--action {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

/* ─────────────────────────────────────────────────────────────────
 *  Footer
 * ───────────────────────────────────────────────────────────────── */
.gp-claim-footer {
    border-top: 1px solid var(--gp-claim-border);
    padding-top: 16px;
    display: flex;
    justify-content: center;
}

.gp-claim-actions {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────
 *  Buttons
 * ───────────────────────────────────────────────────────────────── */
.gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: var(--gp-claim-radius-sm);
    padding: 9px 18px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
    font-family: inherit;
}

.gp-btn:focus-visible {
    outline: 2px solid var(--gp-claim-primary);
    outline-offset: 2px;
}

.gp-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.gp-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.gp-btn--sm {
    padding: 6px 14px;
    font-size: 0.8125rem;
}

.gp-btn--primary {
    background: var(--gp-claim-primary);
    color: var(--gp-claim-primary-text);
}

.gp-btn--primary:hover:not(:disabled) {
    background: var(--gp-claim-primary-hover);
}

.gp-btn--ghost {
    background: transparent;
    color: var(--gp-claim-ghost-text);
    border-color: var(--gp-claim-border);
}

.gp-btn--ghost:hover:not(:disabled) {
    background: var(--gp-claim-ghost-hover);
    color: var(--gp-claim-text);
}

/* ─────────────────────────────────────────────────────────────────
 *  Loading state
 * ───────────────────────────────────────────────────────────────── */
.gp-claim-loading {
    padding: 32px 24px;
    text-align: center;
    color: var(--gp-claim-text-muted);
}

.gp-claim-loading p {
    margin: 12px 0 0;
    font-size: 0.9375rem;
}

.gp-claim-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--gp-claim-border);
    border-top-color: var(--gp-claim-primary);
    border-radius: 50%;
    margin: 0 auto;
    animation: gp-claim-spin 700ms linear infinite;
}

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

/* ─────────────────────────────────────────────────────────────────
 *  Empty / error / success states
 * ───────────────────────────────────────────────────────────────── */
.gp-claim-empty,
.gp-claim-error,
.gp-claim-success {
    text-align: center;
    padding: 20px 8px;
}

.gp-claim-empty p,
.gp-claim-error p,
.gp-claim-success p {
    margin: 8px 0 0;
    color: var(--gp-claim-text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.gp-claim-success__check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gp-claim-success);
    color: white;
    font-size: 28px;
    line-height: 56px;
    margin: 0 auto 16px;
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────
 *  Inline error (shown above table when claim fails non-fatally)
 * ───────────────────────────────────────────────────────────────── */
.gp-claim-inline-error {
    background: var(--gp-claim-error-bg);
    color: var(--gp-claim-error-text);
    border: 1px solid var(--gp-claim-error-border);
    border-radius: var(--gp-claim-radius-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────
 *  Reduced motion: kill animations
 * ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .gp-claim-modal-wrapper,
    .gp-claim-modal,
    .gp-claim-spinner,
    .gp-btn {
        animation: none !important;
        transition: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
 *  Narrow mobile tweaks
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .gp-claim-modal-wrapper {
        padding: 0;
        align-items: stretch;
    }
    .gp-claim-modal {
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        max-width: none;
    }
    .gp-claim-modal__body {
        padding: 56px 16px 20px;
    }
    .gp-claim-table {
        font-size: 0.8125rem;
    }
    .gp-claim-cell,
    .gp-claim-table th {
        padding: 10px 10px;
    }
}