/*
 * Alert boxes (.app-alert + -danger / -warning / -success), used on the Backups page
 * and for the registration form's duplicate warning.
 * Filament 3 ships precompiled CSS without these colour utilities and this app has no
 * theme build, so they are plain CSS. Colour variables are "r, g, b" triplets.
 */

.app-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.app-alert-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    margin-top: 0.0625rem;
}

.app-alert-danger {
    background: var(--danger-50);
    color: var(--danger-800);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-600) 20%, transparent);
}

.app-alert-warning {
    background: var(--warning-50);
    color: var(--warning-800);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-600) 20%, transparent);
}

.app-alert-success {
    background: var(--success-50);
    color: var(--success-800);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success-600) 20%, transparent);
}

.dark .app-alert-danger {
    background: color-mix(in oklab, var(--danger-400) 10%, transparent);
    color: var(--danger-300);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-400) 30%, transparent);
}

.dark .app-alert-warning {
    background: color-mix(in oklab, var(--warning-400) 10%, transparent);
    color: var(--warning-300);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-400) 30%, transparent);
}

.dark .app-alert-success {
    background: color-mix(in oklab, var(--success-400) 10%, transparent);
    color: var(--success-300);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success-400) 30%, transparent);
}

/* Content inside an alert: title, list of matches, small links. */
.app-alert-body {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.app-alert-title {
    font-weight: 600;
}

.app-alert-list {
    display: grid;
    gap: 0.375rem;
}

.app-alert-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.app-alert-muted {
    opacity: 0.8;
    font-size: 0.8125rem;
}

.app-alert a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Upload renewals → "Check" step (resources/views/filament/forms/renewal-import-preview.blade.php) */
.rip {
    display: grid;
    gap: 1rem;
}

.rip-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.rip-stat {
    display: grid;
    gap: 0.125rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-950) 8%, transparent);
}

.dark .rip-stat {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.rip-stat dt {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.rip-stat dd {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.rip-stat span {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.rip-good { color: var(--success-600); }
.rip-warn { color: var(--warning-600); }
.rip-bad { color: var(--danger-600); }

/* Reasons list in the import preview: count and text on one line, wrapping as text. */
.rip .app-alert-item {
    display: block;
}

/* Possible duplicates page (resources/views/filament/pages/possible-duplicates.blade.php) */
.pd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pd-search {
    width: 100%;
    max-width: 18rem;
}

.pd-group {
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 0 0 1px color-mix(in oklab, var(--gray-950) 5%, transparent);
    overflow: hidden;
}

.dark .pd-group {
    background: var(--gray-900);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.pd-group-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.pd-group-title {
    font-size: 1rem;
    font-weight: 600;
}

.pd-group-actions {
    display: flex;
    gap: 0.5rem;
}

.pd-muted {
    font-size: 0.8125rem;
    color: var(--gray-500);
    font-weight: 400;
}

.dark .pd-muted {
    color: var(--gray-400);
}

.pd-muted a {
    color: var(--primary-600);
    font-weight: 500;
}

.pd-table-wrap {
    overflow-x: auto;
    border-top: 1px solid color-mix(in oklab, var(--gray-950) 6%, transparent);
}

.pd-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
    white-space: nowrap;
}

.pd-table th {
    text-align: left;
    font-weight: 600;
    padding: 0.625rem 1rem;
    background: var(--gray-50);
}

.dark .pd-table th {
    background: rgba(255, 255, 255, 0.05);
}

.pd-table td {
    padding: 0.625rem 1rem;
    vertical-align: top;
    border-top: 1px solid color-mix(in oklab, var(--gray-950) 6%, transparent);
}

.pd-table th:first-child,
.pd-table td:first-child {
    padding-left: 1.25rem;
}

/* The row whose "Keep" radio is checked (no server round-trip needed). */
.pd-table tr:has(.pd-radio:checked) td {
    background: color-mix(in oklab, var(--primary-500) 6%, transparent);
}

.pd-radio {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-600);
    vertical-align: middle;
}

.pd-suggested {
    margin-left: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--primary-700);
}

.pd-name {
    font-weight: 600;
    cursor: pointer;
}

.pd-empty {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 3rem 1rem;
    text-align: center;
}

.pd-empty-icon {
    width: 2rem;
    height: 2rem;
    color: var(--success-600);
}

.pd-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}