/*
 * styles/neumorphic.css
 * RxOverlord / PharmAssist — Neumorphic (Soft UI) Utility Classes
 *
 * Requires styles/common.css to be loaded first for CSS variable definitions.
 *
 * Usage:
 * <link rel="stylesheet" href="styles/neumorphic.css">
 *
 * Classes:
 *   .neu-card    — raised card / container
 *   .neu-inset   — pressed / inset element (inputs, selected items)
 *   .neu-btn     — soft-shadow button (with :hover and :active states)
 */

/* ============================================
   NEUMORPHIC CARD (raised)
   ============================================ */

.neu-card {
    background: var(--bg-card);
    border-radius: var(--neumorphic-radius, 16px);
    box-shadow:
        var(--neumorphic-distance, 6px) var(--neumorphic-distance, 6px) var(--neumorphic-blur, 12px) var(--shadow-dark, rgba(0, 0, 0, 0.25)),
        calc(-1 * var(--neumorphic-distance, 6px)) calc(-1 * var(--neumorphic-distance, 6px)) var(--neumorphic-blur, 12px) var(--shadow-light, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    transition: box-shadow var(--transition-fast, 0.2s ease);
}

.neu-card:hover {
    box-shadow:
        calc(var(--neumorphic-distance, 6px) * 1.5) calc(var(--neumorphic-distance, 6px) * 1.5) calc(var(--neumorphic-blur, 12px) * 1.5) var(--shadow-dark, rgba(0, 0, 0, 0.25)),
        calc(-1 * var(--neumorphic-distance, 6px) * 1.5) calc(-1 * var(--neumorphic-distance, 6px) * 1.5) calc(var(--neumorphic-blur, 12px) * 1.5) var(--shadow-light, rgba(255, 255, 255, 0.03));
    border-color: var(--border-hover);
}

/* ============================================
   NEUMORPHIC INSET (pressed / recessed)
   ============================================ */

.neu-inset {
    background: var(--bg-secondary);
    border-radius: 12px;
    box-shadow:
        inset 4px 4px 8px var(--shadow-dark, rgba(0, 0, 0, 0.2)),
        inset -4px -4px 8px var(--shadow-light, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border-color);
}

/* Input fields — inset style */
input.neu-inset,
textarea.neu-inset,
select.neu-inset {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    outline: none;
    transition: box-shadow var(--transition-fast, 0.2s ease), border-color var(--transition-fast, 0.2s ease);
}

input.neu-inset:focus,
textarea.neu-inset:focus,
select.neu-inset:focus {
    border-color: var(--accent-primary);
    box-shadow:
        inset 4px 4px 8px var(--shadow-dark, rgba(0, 0, 0, 0.2)),
        inset -4px -4px 8px var(--shadow-light, rgba(255, 255, 255, 0.02)),
        0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

/* ============================================
   NEUMORPHIC BUTTON
   ============================================ */

.neu-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: inherit;
    box-shadow:
        4px 4px 8px var(--shadow-dark, rgba(0, 0, 0, 0.2)),
        -4px -4px 8px var(--shadow-light, rgba(255, 255, 255, 0.03));
    transition: all var(--transition-fast, 0.2s ease);
}

.neu-btn:hover {
    border-color: var(--border-hover);
    box-shadow:
        2px 2px 4px var(--shadow-dark, rgba(0, 0, 0, 0.2)),
        -2px -2px 4px var(--shadow-light, rgba(255, 255, 255, 0.03));
    transform: translateY(-1px);
}

.neu-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 2px 2px 4px var(--shadow-dark, rgba(0, 0, 0, 0.2)),
        inset -2px -2px 4px var(--shadow-light, rgba(255, 255, 255, 0.02));
}

/* Accent-coloured primary button variant */
.neu-btn-primary {
    background: var(--accent-gradient);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: inherit;
    box-shadow:
        4px 4px 8px var(--shadow-dark, rgba(0, 0, 0, 0.2)),
        -4px -4px 8px var(--shadow-light, rgba(255, 255, 255, 0.03));
    transition: all var(--transition-fast, 0.2s ease);
}

.neu-btn-primary:hover {
    box-shadow:
        2px 2px 4px var(--shadow-dark, rgba(0, 0, 0, 0.2)),
        -2px -2px 4px var(--shadow-light, rgba(255, 255, 255, 0.03)),
        var(--shadow-glow);
    transform: translateY(-1px);
}

.neu-btn-primary:active {
    transform: translateY(0);
    box-shadow:
        inset 2px 2px 4px var(--shadow-dark, rgba(0, 0, 0, 0.2)),
        inset -2px -2px 4px var(--shadow-light, rgba(255, 255, 255, 0.02));
}