/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Feedback System Styles
 * Toast notifications, loading states, and action feedback
 */

/* Toast Container */
.toast-container {
    position: fixed;
    top: var(--spacing-md, 1rem);
    right: var(--spacing-md, 1rem);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    max-width: 400px;
    pointer-events: none;

/* Toast Notification */
.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-md, 1rem);
    background: rgba(20, 20, 30, 0.98);
    border: 2px solid;
    border-radius: var(--radius-lg, calc(var(--radius-sm) * 1.5));
    box-shadow: 0 6px 20px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.6);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    font-family: 'Roboto Mono', monospace;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    max-width: 100%;

.toast-show {
    opacity: 1;
    transform: translateX(0);

.toast-hide {
    opacity: 0;
    transform: translateX(100%);

/* Toast Types */
.toast-success {
    border-color: var(--color-success, #4caf50);
    background: rgba(20, 40, 20, 0.98);

.toast-error {
    border-color: var(--color-failure, #ff6b6b);
    background: rgba(40, 20, 20, 0.98);

.toast-warning {
    border-color: var(--color-warning, #ffa726);
    background: rgba(40, 30, 20, 0.98);

.toast-info {
    border-color: var(--color-info, #4a90e2);
    background: rgba(20, 30, 40, 0.98);

.toast-icon {
    font-size: 1.25rem;
    font-weight: bold;
    flex-shrink: 0;

.toast-success .toast-icon {
    color: var(--color-success, #4caf50);

.toast-error .toast-icon {
    color: var(--color-failure, #ff6b6b);

.toast-warning .toast-icon {
    color: var(--color-warning, #ffa726);

.toast-info .toast-icon {
    color: var(--color-info, #4a90e2);

.toast-message {
    flex: 1;
    line-height: 1.5;

.toast-close {
    background: none;
    border: none;
    color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.7);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
    flex-shrink: 0;

.toast-close:hover {
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    color: var(--color-text-primary);

/* Loading Overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 20, 30, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 1rem);
    z-index: 1000;
    border-radius: inherit;

.loading-fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;

/* Loading Spinner */
.loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 4px solid rgba(74, 144, 226, 0.2);
    border-top-color: var(--color-info, #4a90e2);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;

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

.loading-message {
    color: var(--color-text, var(--color-text-primary));
    font-size: 0.875rem;
    font-family: 'Roboto Mono', monospace;

/* Button Loading State */
.button-loading {
    position: relative;
    opacity: 0.7;
    cursor: not-allowed;

.button-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.3);
    border-top-color: var(--color-text-primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
    margin-right: var(--spacing-xs, 0.25rem);
    vertical-align: middle;

/* Confirmation Dialog */
.confirmation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);

.confirmation-show {
    opacity: 1;

.confirmation-hide {
    opacity: 0;

.confirmation-dialog {
    background: rgba(20, 20, 30, 0.98);
    border: 2px solid var(--color-info, #4a90e2);
    border-radius: var(--radius-lg, calc(var(--radius-sm) * 1.5));
    padding: var(--spacing-lg, 1.5rem);
    max-width: 504px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.8);
    transform: scale(0.9);
    transition: transform 0.3s ease;

.confirmation-show .confirmation-dialog {
    transform: scale(1);

.confirmation-title {
    margin: 0 0 var(--spacing-md, 1rem) 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text, var(--color-text-primary));
    font-family: 'Orbitron', sans-serif;

.confirmation-message {
    margin: 0 0 var(--spacing-lg, 1.5rem) 0;
    color: var(--color-text-secondary, var(--color-text-secondary));
    line-height: 1.6;
    font-size: 0.9375rem;

.confirmation-actions {
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
    justify-content: flex-end;

.confirmation-btn {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    border: 2px solid;
    border-radius: var(--radius-md, var(--radius-sm));
    font-size: 0.875rem;
    font-family: 'Roboto Mono', monospace;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;

.confirmation-cancel {
    background: transparent;
    border-color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.3);
    color: var(--color-text, var(--color-text-primary));

.confirmation-cancel:hover {
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    border-color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.5);

.confirmation-confirm {
    background: var(--color-info, #4a90e2);
    border-color: var(--color-info, #4a90e2);
    color: var(--color-text-primary);

.confirmation-confirm:hover {
    background: var(--color-info-light, #6ba3e8);
    border-color: var(--color-info-light, #6ba3e8);

.confirmation-warning .confirmation-confirm {
    background: var(--color-warning, #ffa726);
    border-color: var(--color-warning, #ffa726);

.confirmation-warning .confirmation-confirm:hover {
    background: #ffb74d;
    border-color: #ffb74d;

.confirmation-error .confirmation-confirm {
    background: var(--color-failure, #ff6b6b);
    border-color: var(--color-failure, #ff6b6b);

.confirmation-error .confirmation-confirm:hover {
    background: #ff8787;
    border-color: #ff8787;

/* Responsive */
@media (max-width: 768px) {
    .toast-container {
        top: var(--spacing-sm, 0.5rem);
        right: var(--spacing-sm, 0.5rem);
        left: var(--spacing-sm, 0.5rem);
        max-width: none;

    .toast {
        max-width: 100%;

    .confirmation-dialog {
        width: 95%;
        padding: var(--spacing-md, 1rem);

/* ===== Add loading states and feedback ===== */
/* TODO: No visual feedback for actions (Score: 5.0/10). Users don't know if actions succeeded. Add loading states, confirmations, toast notifications. */

/* ===== [Rework] Add loading states and feedback ===== */
/* TODO: No visual feedback for actions (Score: 5.0/10). Users don't know if actions succeeded. Add loading states, confirmations, toast notifications.

[Note: This task was previously marked complete but needs proper implementation. Missing files: none] */

/* ===== [Rework] Add loading states and feedback ===== */
/* TODO: No visual feedback for actions (Score: 5.0/10). Users don't know if actions succeeded. Add loading states, confirmations, toast notifications.

[Note: This task was previously marked complete but needs proper implementation. Missing files: none] */

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}