/* =========================================================================
   Reusable components: card, badge, button, tabs, dropdown, states, toast.
   ========================================================================= */

.ssm-card {
	background: var(--ssm-surface);
	border: 1px solid var(--ssm-border);
	border-radius: var(--ssm-radius-lg);
	box-shadow: var(--ssm-shadow-sm);
}
.ssm-card__header { display: flex; align-items: center; gap: var(--ssm-sp-3); padding: var(--ssm-sp-4) var(--ssm-sp-5); border-bottom: 1px solid var(--ssm-border); }
.ssm-card__header h2, .ssm-card__header h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
/* A card carrying a semantic color (§9) gets a small accent dot before its heading — a light, consistent way to tie module identity to content without recoloring the whole card. */
.ssm-card[data-ssm-color] .ssm-card__header h2::before,
.ssm-card[data-ssm-color] .ssm-card__header h3::before {
	content: ''; width: 8px; height: 8px; border-radius: 50%;
	background: var(--ssm-item); flex-shrink: 0;
}
.ssm-card__header .ssm-card__more { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ssm-color-primary); display: flex; align-items: center; gap: 4px; }
.ssm-card__body { padding: var(--ssm-sp-5); }
.ssm-card__body--flush { padding: 0; }

.ssm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 14px; font-weight: 600;
	padding: 10px 18px;
	border-radius: var(--ssm-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--ssm-transition), border-color var(--ssm-transition), color var(--ssm-transition);
}
.ssm-btn--primary { background: var(--ssm-color-primary); color: #fff; }
.ssm-btn--primary:hover { background: var(--ssm-blue-700); }
.ssm-btn--secondary { background: var(--ssm-surface); color: var(--ssm-text); border-color: var(--ssm-border-strong); }
.ssm-btn--secondary:hover { background: var(--ssm-bg); }
.ssm-btn--ghost { background: transparent; color: var(--ssm-color-primary); }
.ssm-btn--ghost:hover { background: var(--ssm-color-primary-light); }
.ssm-btn--sm { padding: 6px 12px; font-size: 13px; }
.ssm-btn[disabled] { opacity: .5; cursor: not-allowed; }

.ssm-badge {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 11px; font-weight: 700; letter-spacing: .02em;
	padding: 3px 9px;
	border-radius: var(--ssm-radius-full);
	background: var(--ssm-color-info-light); color: var(--ssm-color-info);
	text-transform: uppercase;
}
.ssm-badge--danger  { background: var(--ssm-color-danger-light); color: var(--ssm-color-danger); }
.ssm-badge--warning { background: var(--ssm-color-warning-light); color: #8a5a11; }
.ssm-badge--success { background: var(--ssm-color-success-light); color: var(--ssm-color-success); }
.ssm-badge--neutral  { background: var(--ssm-bg); color: var(--ssm-text-muted); }
.ssm-badge[data-ssm-color] { background: var(--ssm-item-wash); color: var(--ssm-item); }

.ssm-avatar-group { display: flex; }
.ssm-avatar-group .ssm-avatar { margin-left: -8px; border: 2px solid var(--ssm-surface); }
.ssm-avatar-group .ssm-avatar:first-child { margin-left: 0; }

/* Tabs */
.ssm-tabs { display: flex; gap: var(--ssm-sp-2); border-bottom: 1px solid var(--ssm-border); margin-bottom: var(--ssm-sp-5); overflow-x: auto; }
.ssm-tabs__item { padding: 10px 4px; font-size: 14px; font-weight: 600; color: var(--ssm-text-muted); border-bottom: 2px solid transparent; white-space: nowrap; margin-right: var(--ssm-sp-5); }
.ssm-tabs__item.is-active { color: var(--ssm-color-primary); border-color: var(--ssm-color-primary); }

/* Dropdown panel (notifications, user menu, search results) */
.ssm-dropdown { position: relative; }
.ssm-dropdown__panel {
	position: absolute; right: 0; top: calc(100% + 8px);
	width: 340px; max-width: 90vw;
	background: var(--ssm-surface);
	border: 1px solid var(--ssm-border);
	border-radius: var(--ssm-radius-md);
	box-shadow: var(--ssm-shadow-lg);
	z-index: 50;
	display: none;
	max-height: 70vh;
	overflow-y: auto;
}
.ssm-dropdown__panel.is-open { display: block; }
.ssm-dropdown__panel-header { padding: var(--ssm-sp-4); border-bottom: 1px solid var(--ssm-border); font-weight: 700; font-size: 14px; }
.ssm-dropdown__item { display: flex; gap: var(--ssm-sp-3); padding: var(--ssm-sp-3) var(--ssm-sp-4); border-bottom: 1px solid var(--ssm-border); }
.ssm-dropdown__item:last-child { border-bottom: none; }
.ssm-dropdown__item:hover { background: var(--ssm-bg); }

/* Empty / error / loading / no-permission states (§54) */
.ssm-state { text-align: center; padding: var(--ssm-sp-8) var(--ssm-sp-5); color: var(--ssm-text-muted); }
.ssm-state__icon { width: 40px; height: 40px; margin: 0 auto var(--ssm-sp-3); color: var(--ssm-text-faint); }
.ssm-state__title { font-weight: 700; color: var(--ssm-text); margin-bottom: 4px; }
.ssm-state__desc { font-size: 13.5px; }

.ssm-skeleton { background: linear-gradient(90deg, var(--ssm-border) 25%, var(--ssm-bg) 37%, var(--ssm-border) 63%); background-size: 400% 100%; animation: ssm-skeleton-loading 1.4s ease infinite; border-radius: var(--ssm-radius-sm); }
@keyframes ssm-skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Toast */
.ssm-toast-region { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.ssm-toast {
	background: var(--ssm-color-primary-dark); color: #fff;
	padding: 12px 16px; border-radius: var(--ssm-radius-sm);
	font-size: 13.5px; box-shadow: var(--ssm-shadow-md);
	max-width: 320px;
	animation: ssm-toast-in 160ms ease;
}
@keyframes ssm-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) { .ssm-toast-region { left: 12px; right: 12px; bottom: 76px; } .ssm-toast { max-width: none; } }