.aiq-btn-group-toggle { display: flex; gap: 8px; }
.aiq-btn-outline {
	background: transparent;
	border: 1px solid var(--aiq-border);
	color: var(--aiq-ink);
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-family: 'DM Sans', sans-serif;
	transition: all 0.3s;
}
.aiq-btn-outline:hover,
.aiq-btn-outline.active {
	background: rgba(108, 99, 255, 0.2);
	border-color: var(--aiq-primary);
	color: #fff;
}
.aiq-table-hoverable tbody tr { transition: background 0.2s; }
.aiq-table-hoverable tbody tr:hover { background: rgba(255, 255, 255, 0.05); }

.aiq-badge { padding: 4px 8px; border-radius: 4px; font-weight: 600; font-size: 13px; }
.aiq-badge-green { background: rgba(67, 217, 173, 0.1); color: #43D9AD; }
.aiq-badge-yellow { background: rgba(255, 179, 71, 0.1); color: #FFB347; }
.aiq-badge-red { background: rgba(255, 101, 132, 0.1); color: #FF6584; }

.aiq-skeleton-row td { position: relative; overflow: hidden; height: 40px; }
@keyframes aiq-shimmer {
	from { transform: translateX(-100%); }
	to { transform: translateX(100%); }
}

.aiq-skeleton-row td::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
	animation: aiq-shimmer 1.5s infinite linear;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 782px) {

    /* Hoverable table: enable horizontal scroll on small screens */
    .aiq-table-hoverable {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Badge row: allow wrap */
    .aiq-badge {
        display: inline-block;
        margin-bottom: 2px;
    }
}

@media (max-width: 480px) {

    /* Button group: stack on tiny screens */
    .aiq-btn-group-toggle {
        flex-direction: column;
        align-items: stretch;
    }

    .aiq-btn-outline {
        text-align: center;
    }
}