/**
 * INTERACTIONS - PharmData Design System v2.0
 * Feedback tátil, estados de foco, ações críticas
 *
 * Padrões para garantir que o curador tenha feedback
 * claro e imediato em todas as interações.
 */

:root {
    /* Transition timings */
    --transition-instant: 0.05s;
    --transition-fast: 0.15s;
    --transition-normal: 0.25s;
    --transition-slow: 0.4s;

    /* Easing functions */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Focus ring */
    --focus-ring-color: rgba(42, 161, 152, 0.4);
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
}

/* Dark mode focus ring - more visible on dark backgrounds */
:root.dark-mode,
[data-theme="dark"] {
    --focus-ring-color: rgba(183, 228, 213, 0.5);
}

/* ===================
   TACTILE FEEDBACK
   Resposta visual imediata para cliques
   =================== */

/* Button press effect */
.btn,
button,
[role="button"] {
    transition:
        transform var(--transition-instant) var(--ease-out),
        box-shadow var(--transition-fast) var(--ease-default),
        background-color var(--transition-fast) var(--ease-default),
        border-color var(--transition-fast) var(--ease-default);
}

.btn:active:not(:disabled),
button:active:not(:disabled),
[role="button"]:active:not(:disabled) {
    transform: scale(0.97);
}

/* Card/clickable area press effect */
.card-clickable:active,
[data-clickable]:active {
    transform: scale(0.99);
    transition: transform var(--transition-instant) var(--ease-out);
}

/* Link press effect */
a:active {
    opacity: 0.8;
}

/* ===================
   CRITICAL ACTIONS
   Ações destrutivas ou irreversíveis
   =================== */

/* Destructive action base - requires confirmation */
.action-destructive {
    --btn-bg: transparent;
    --btn-color: var(--error, #EF5350);
    --btn-border: rgba(239, 83, 80, 0.3);

    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
    transition: all var(--transition-fast) var(--ease-default);
}

.action-destructive:hover {
    --btn-bg: rgba(239, 83, 80, 0.08);
    --btn-border: rgba(239, 83, 80, 0.5);
}

/* Confirmed destructive action - fully enabled */
.action-destructive.confirmed,
.action-destructive:focus {
    --btn-bg: var(--error, #EF5350);
    --btn-color: white;
    --btn-border: var(--error, #EF5350);
}

/* Require hold to confirm (3 second hold) */
.action-hold-confirm {
    position: relative;
    overflow: hidden;
}

.action-hold-confirm::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--error, #EF5350);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0s linear;
    z-index: -1;
}

.action-hold-confirm:active::before {
    transform: scaleX(1);
    transition: transform 2s linear;
}

/* Approval action */
.action-approve {
    --btn-bg: transparent;
    --btn-color: var(--success, #4CAF50);
    --btn-border: rgba(76, 175, 80, 0.3);

    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
}

.action-approve:hover {
    --btn-bg: rgba(76, 175, 80, 0.08);
    --btn-border: rgba(76, 175, 80, 0.5);
}

.action-approve:active {
    --btn-bg: var(--success, #4CAF50);
    --btn-color: white;
    transform: scale(0.97);
}

/* ===================
   FOCUS STATES
   Accessibility-first focus indicators
   =================== */

/* Global focus reset */
*:focus {
    outline: none;
}

/* Keyboard-only focus (focus-visible) */
*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Input focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--teal-intense, #2AA198);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* Button focus */
.btn:focus-visible,
button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Card/interactive area focus */
.card:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Link focus */
a:focus-visible {
    outline: 2px solid var(--teal-intense, #2AA198);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--emerald-abyss, #0B2D2A);
    color: white;
    font-weight: 600;
    border-radius: var(--radius-md);
    z-index: var(--z-max, 9999);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-4);
}

/* ===================
   HOVER STATES
   =================== */

/* Lift effect on hover */
.hover-lift {
    transition: transform var(--transition-fast) var(--ease-out),
                box-shadow var(--transition-fast) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(11, 45, 42, 0.1));
}

/* Glow effect on hover */
.hover-glow {
    transition: box-shadow var(--transition-fast) var(--ease-out);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(42, 161, 152, 0.15);
}

/* Scale effect on hover */
.hover-scale {
    transition: transform var(--transition-fast) var(--ease-out);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* ===================
   DISABLED STATES
   =================== */

[disabled],
.disabled,
[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Partial disabled (visible but not interactive) */
.disabled-partial {
    opacity: 0.7;
    cursor: not-allowed;
}

.disabled-partial * {
    pointer-events: none;
}

/* ===================
   LOADING STATES
   =================== */

.is-loading {
    position: relative;
    pointer-events: none;
}

.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    cursor: wait;
}

/* ===================
   SUCCESS/ERROR FEEDBACK
   =================== */

/* Success flash */
@keyframes success-flash {
    0% { background-color: rgba(76, 175, 80, 0.2); }
    100% { background-color: transparent; }
}

.flash-success {
    animation: success-flash 1s var(--ease-out);
}

/* Error shake */
@keyframes error-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake-error {
    animation: error-shake 0.5s var(--ease-out);
}

/* Input error state */
.input-error,
input:invalid:not(:placeholder-shown) {
    border-color: var(--error, #EF5350) !important;
    background: rgba(239, 83, 80, 0.04);
}

/* Input success state */
.input-success,
input:valid:not(:placeholder-shown) {
    border-color: var(--success, #4CAF50);
}

/* ===================
   TOOLTIP TRIGGER
   =================== */

[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: var(--space-1) var(--space-2);
    background: var(--emerald-abyss, #0B2D2A);
    color: white;
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: var(--z-tooltip, 700);
    pointer-events: none;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
}

/* ===================
   CONFIRMATION DIALOG STATES
   =================== */

/* Pending confirmation */
.confirm-pending {
    border: 2px dashed var(--warning, #FFA726);
    background: rgba(255, 167, 38, 0.05);
}

/* Confirmed */
.confirm-accepted {
    border: 2px solid var(--success, #4CAF50);
    background: rgba(76, 175, 80, 0.05);
}

/* Rejected */
.confirm-rejected {
    border: 2px solid var(--error, #EF5350);
    background: rgba(239, 83, 80, 0.05);
}

/* ===================
   REDUCED MOTION
   =================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hover-lift:hover,
    .hover-scale:hover {
        transform: none;
    }

    .btn:active,
    button:active,
    .card-clickable:active {
        transform: none;
    }
}

/* ===================
   HIGH CONTRAST MODE
   =================== */

@media (prefers-contrast: high) {
    *:focus-visible {
        outline: 3px solid currentColor !important;
        outline-offset: 3px;
    }

    .action-destructive {
        border-width: 2px;
    }

    .action-approve {
        border-width: 2px;
    }
}