/* ============================================
   22. UTILITY CLASSES & ADVANCED UX PATTERNS
   ============================================ */
.mb-4 { margin-bottom: 1rem; }
.text-danger { color: var(--danger); }
.text-muted { color: var(--text-muted); }

/* Loading skeleton animation */
p:empty,
td:only-child[colspan] {
    position: relative;
    color: transparent !important;
}

/* Skeleton loading placeholder */
.content p:only-child {
    position: relative;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: var(--text-muted);
    font-size: 14px;
    animation: loadingPulse 1.8s ease-in-out infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Smooth scrolling for list containers */
.list {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* Table scroll shadow hint (horizontal scroll indicator) */
table {
    scroll-behavior: smooth;
}

/* Interactive row number highlight */
td:first-child {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-muted);
    transition: color var(--duration-fast) var(--ease);
}

tbody tr:hover td:first-child {
    color: var(--brand);
}

/* Modal title icon spacing */
.modal-content h3 i,
.modal-content h4 i {
    margin-right: 8px;
    color: var(--brand);
}

/* Smooth page transition between routes */
.main {
    animation: pageEnter var(--duration-enter) var(--ease-out-expo) both;
}

/* Hover underline animation for text links */
.nav-item span {
    position: relative;
}

/* Card subtitle / secondary text enhancement */
.card .label,
.stat-label {
    letter-spacing: 0.3px;
}

/* Button icon alignment */
.add-main i,
.actions button i {
    transition: transform var(--duration-fast) var(--ease-spring);
}

.add-main:hover i {
    transform: rotate(-8deg) scale(1.1);
}

.actions button:hover i {
    transform: scale(1.2);
}

/* Empty state styling */
tbody td[colspan] {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
    font-style: italic;
}

/* Audio player custom styling */
audio {
    filter: saturate(0.8);
    transition: filter var(--duration-fast) var(--ease);
}

audio:hover {
    filter: saturate(1.2);
}

/* Validation state animations */
.valid.modified:not([type=checkbox]) {
    animation: validPulse 0.3s var(--ease);
}

.invalid {
    animation: invalidShake 0.3s var(--ease);
}

@keyframes validPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes invalidShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Interactive column headers */
th {
    transition: color var(--duration-fast) var(--ease);
    position: relative;
}

th:hover {
    color: var(--text-secondary);
}

/* Growth section heading icon */
.growth h2 {
    transition: color var(--duration-fast) var(--ease);
}

.growth h2::before {
    transition: transform var(--duration) var(--ease-spring);
}

.growth:hover h2::before {
    transform: scaleY(1.3);
}