/**
 * DH Suite — shared feedback.
 *
 * Split out of components.css, which had grown to 1,073 lines
 * across eleven unrelated families. Same layer, same order: these are
 * linked in the sequence they were concatenated, because within a layer
 * later source wins.
 */

@layer components {

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    text-transform: capitalize;
}

/* --- Semantic variants -------------------------------------------------- */

.badge-success { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-text); }
.badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-info    { background: var(--badge-info-bg);    color: var(--badge-info-text); }
.badge-primary { background: var(--badge-primary-bg); color: var(--badge-primary-text); }
.badge-secondary { background: var(--badge-secondary-bg); color: var(--badge-secondary-text); }

/* --- Status variants ---------------------------------------------------- */

.badge-pending    { background: var(--badge-pending-bg);     color: var(--badge-pending-text); }
.badge-assigned   { background: var(--badge-assigned-bg);    color: var(--badge-assigned-text); }
.badge-in-progress { background: var(--badge-in-progress-bg); color: var(--badge-in-progress-text); }
.badge-completed  { background: var(--badge-completed-bg);   color: var(--badge-completed-text); }
.badge-cancelled  { background: var(--badge-cancelled-bg);   color: var(--badge-cancelled-text); }
.badge-available  { background: var(--badge-available-bg);   color: var(--badge-available-text); }

/* Status classes (alternative naming convention used in templates) */
.status-pending    { background-color: var(--badge-pending-bg);     color: var(--badge-pending-text); }
.status-assigned   { background-color: var(--badge-assigned-bg);    color: var(--badge-assigned-text); }
.status-in-progress,
.status-in_progress { background-color: var(--badge-in-progress-bg); color: var(--badge-in-progress-text); }
.status-completed  { background-color: var(--badge-completed-bg);   color: var(--badge-completed-text); }
.status-cancelled  { background-color: var(--badge-cancelled-bg);   color: var(--badge-cancelled-text); }
.status-available  { background-color: var(--badge-available-bg);   color: var(--badge-available-text); }
.status-deployed   { background-color: var(--badge-deployed-bg);    color: var(--badge-deployed-text); }
.status-returning  { background-color: var(--badge-returning-bg);   color: var(--badge-returning-text); }
.status-checked-in { background-color: var(--badge-available-bg);   color: var(--badge-available-text); }
.status-not-in     { background-color: var(--badge-danger-bg);      color: var(--badge-danger-text); }
.status-success    { background-color: var(--badge-success-bg);     color: var(--badge-success-text); }

/* --- Priority variants -------------------------------------------------- */

.priority-critical { background-color: var(--badge-critical-bg); color: var(--badge-critical-text); }
.priority-high     { background-color: var(--badge-high-bg);     color: var(--badge-high-text); }
.priority-medium   { background-color: var(--badge-medium-bg);   color: var(--badge-medium-text); }
.priority-low      { background-color: var(--badge-low-bg);      color: var(--badge-low-text); }

/* --- Convenience aliases ------------------------------------------------ */

.badge-approved  { background: var(--badge-success-bg);   color: var(--badge-success-text); }
.badge-rejected  { background: var(--badge-danger-bg);    color: var(--badge-danger-text); }
.badge-suspended { background: var(--badge-secondary-bg); color: var(--badge-secondary-text); }

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.alert-error,
.alert-danger {
    color: var(--badge-danger-text);
    background-color: var(--badge-danger-bg);
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
}

.alert-success {
    color: var(--badge-success-text);
    background-color: var(--badge-success-bg);
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}

.alert-warning {
    color: var(--badge-warning-text);
    background-color: var(--badge-warning-bg);
    border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
}

.alert-info {
    color: var(--badge-info-text);
    background-color: var(--badge-info-bg);
    border: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
}

/* Legacy aliases used in Respond templates */
.error-message {
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    color: var(--badge-danger-text);
    background-color: var(--badge-danger-bg);
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.success-message {
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    color: var(--badge-success-text);
    background-color: var(--badge-success-bg);
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: var(--spacing-8);
    color: var(--color-gray-500);
}

.empty-state svg {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-4);
    color: var(--color-gray-300);
}

.empty-state p {
    margin: 0;
}

/* ==========================================================================
   Toasts (shared/static/js/toast.js). Darker fills than the base
   status colours, so white text keeps a 4.5:1 contrast.
   ========================================================================== */

.toast-container {
    position: fixed;
    bottom: var(--spacing-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    width: max-content;
    max-width: calc(100vw - 2 * var(--spacing-4));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-5);
    border-radius: var(--radius-lg);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-in 0.3s ease;
}

.toast-info { background-color: var(--color-info-dark); }
.toast-success { background-color: var(--color-success-text); }
.toast-error { background-color: var(--color-danger-dark); }
.toast-warning { background-color: var(--color-warning); color: var(--color-gray-900); }

.toast-message {
    flex: 1;
}

.toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: var(--font-size-lg);
    line-height: 1;
    padding: var(--spacing-1) var(--spacing-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.toast-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.toast-leaving {
    animation: toast-out 0.3s ease forwards;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .toast-leaving {
        animation: none;
    }
}

}