/* ==========================================
   Integration — Interactive Enhancements
   ========================================== */

/* ---- Card hover lift ---- */
.card-hover,
.stat-card,
.kpi-card,
.finance-card,
.modern-card,
.filter-card {
    transition:
        transform   0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
        box-shadow  0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
        border-color 0.2s ease;
}

.card-hover:hover,
.stat-card:hover,
.kpi-card:hover,
.finance-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.13);
    border-color: var(--primary-100);
}

/* ---- Clickable table rows ---- */
.row-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

/* ---- Button ripple effect ---- */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    inset: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.btn-ripple:active::after {
    width: 280px;
    height: 280px;
    opacity: 0;
}

/* ---- Form field focus enhancement ---- */
.form-control,
.form-select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="search"],
select,
textarea {
    transition:
        border-color 0.18s ease,
        box-shadow   0.18s ease,
        background   0.18s ease;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ---- Smooth links ---- */
a {
    transition: color 0.15s ease, opacity 0.15s ease;
}

/* ---- Action icon buttons ---- */
.btn-icon,
.btn-action.icon-only {
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        transform  0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
        color      0.16s ease;
}

.btn-icon:hover {
    transform: scale(1.12);
}

/* ---- Stat card icon bounce ---- */
.stat-icon:hover,
.header-icon-wrapper:hover,
.kpi-icon:hover {
    animation: bounceIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Alert auto-dismiss progress ---- */
.alert-dismissible .alert-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.25;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ---- Smooth scroll ---- */
html {
    scroll-behavior: smooth;
}

/* ---- Focus visible outline for accessibility ---- */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---- Loading state overlay ---- */
.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.65;
}

.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(248, 250, 252, 0.55);
    border-radius: inherit;
    z-index: 10;
}

/* ---- Table row fade-in on load ---- */
@media (prefers-reduced-motion: no-preference) {
    .data-table tbody tr,
    .professional-table tbody tr {
        animation: fadeIn 0.2s ease both;
    }
}