/**
 * Utilities Module
 */

.tooltip-container { position: relative; display: inline-block; }
.tooltip { position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background: var(--text-primary); color: var(--surface); padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.875rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: var(--transition-normal); z-index: 1001; box-shadow: var(--shadow-lg); }
.tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--text-primary); }
.tooltip-container:hover .tooltip { opacity: 1; visibility: visible; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Utility visibility helpers */
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.loading { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--border); border-radius: 50%; border-top-color: var(--primary); animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: var(--radius-sm); }
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.error-message { background: linear-gradient(135deg, var(--error), #dc2626); color: white; padding: 1rem; border-radius: var(--radius-md); margin: 1rem 0; display: flex; align-items: center; gap: 0.75rem; }

.unified-toolbar { /* responsive override placeholder */ }