/* =============================================================================
   E500-S02 — Shared Component Library (c-* prefix)

   Primitives consumed by admin, bOSS, registry, exchange, partners. All use
   base design tokens + vhost accent, so they theme correctly under any
   data-vhost + data-theme. Names use c- prefix to avoid collision with the
   marketing components.css.
   ============================================================================= */

/* ---------- Modal + Drawer ----------------------------------------------- */

.c-modal, .c-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
}
.c-modal[hidden], .c-drawer[hidden] { display: none; }

.c-modal__backdrop, .c-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
}

.c-modal__panel {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 48px);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: c-modal-in 180ms ease-out;
}
.c-modal--sm .c-modal__panel { max-width: 400px; }
.c-modal--lg .c-modal__panel { max-width: 860px; }

@keyframes c-modal-in {
	from { transform: translateY(8px) scale(0.98); opacity: 0; }
	to   { transform: translateY(0) scale(1);     opacity: 1; }
}

.c-modal__header, .c-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}
.c-modal__title, .c-drawer__title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: 600;
}
.c-modal__close, .c-drawer__close, .c-alert__close, .c-toast__close {
	background: transparent;
	border: 0;
	color: var(--color-text-secondary);
	font-size: var(--text-2xl);
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
}
.c-modal__close:hover, .c-drawer__close:hover { background: var(--color-surface-2); color: var(--color-text-primary); }

.c-modal__body, .c-drawer__body { padding: var(--space-lg); overflow-y: auto; flex: 1; }
.c-modal__footer, .c-drawer__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	border-top: 1px solid var(--color-border);
	background: var(--color-surface-1);
}

/* Drawer */
.c-drawer { justify-content: flex-end; }
.c-drawer--left { justify-content: flex-start; }
.c-drawer__panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	height: 100vh;
	background: var(--color-bg);
	border-left: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	animation: c-drawer-in 220ms ease-out;
}
.c-drawer--sm .c-drawer__panel { max-width: 320px; }
.c-drawer--lg .c-drawer__panel { max-width: 720px; }
.c-drawer--left .c-drawer__panel { border-left: 0; border-right: 1px solid var(--color-border); animation-name: c-drawer-in-left; }
@keyframes c-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes c-drawer-in-left { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Data Table ---------------------------------------------------- */

.c-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.c-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.c-table th, .c-table td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--color-border); }
.c-table thead { background: var(--color-surface-1); }
.c-table th { font-weight: 600; color: var(--color-text-secondary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.c-table tbody tr:last-child td { border-bottom: 0; }
.c-table tbody tr:hover { background: var(--color-surface-1); }
.c-table__col--right { text-align: right; }
.c-table__col--center { text-align: center; }
.c-table__col--mono { font-family: var(--font-mono); }
.c-table__sort { background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; padding: 0; }
.c-table__sort:hover { color: var(--color-text-primary); }
.c-table__empty td { color: var(--color-text-tertiary); text-align: center; padding: var(--space-lg); }

/* ---------- Pagination ---------------------------------------------------- */

.c-pagination { display: inline-flex; gap: 4px; align-items: center; margin-top: var(--space-md); flex-wrap: wrap; }
.c-pagination__link {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-primary);
	text-decoration: none;
	font-size: var(--text-sm);
	background: var(--color-surface-1);
}
.c-pagination__link:hover { background: var(--color-surface-2); }
.c-pagination__link--current { background: var(--vhost-accent); color: #000; border-color: var(--vhost-accent); font-weight: 600; }
.c-pagination__link--disabled { opacity: 0.4; pointer-events: none; }

/* ---------- Form Field ---------------------------------------------------- */

.c-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-md); }
.c-field__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); }
.c-field__required { color: var(--color-error); }
.c-field__input {
	padding: 8px 12px;
	background: var(--color-surface-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-primary);
	font: inherit;
	transition: border-color var(--transition-fast);
}
.c-field__input:focus { outline: 0; border-color: var(--vhost-accent); box-shadow: 0 0 0 3px var(--vhost-accent-muted); }
.c-field--error .c-field__input { border-color: var(--color-error); }
.c-field__help { font-size: var(--text-xs); color: var(--color-text-tertiary); margin: 0; }
.c-field__error { font-size: var(--text-xs); color: var(--color-error); margin: 0; }

/* ---------- Badge (c-badge, distinct from existing .badge) --------------- */

.c-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: 1.6;
	border: 1px solid transparent;
}
.c-badge--neutral { background: var(--color-surface-2); color: var(--color-text-secondary); }
.c-badge--success { background: rgba(0, 200, 83, 0.12); color: var(--color-success); border-color: rgba(0, 200, 83, 0.25); }
.c-badge--warning { background: rgba(255, 214, 0, 0.10); color: var(--color-warning); border-color: rgba(255, 214, 0, 0.25); }
.c-badge--error   { background: rgba(255, 23, 68, 0.10); color: var(--color-error); border-color: rgba(255, 23, 68, 0.25); }
.c-badge--info    { background: var(--color-accent-cyan-muted); color: var(--color-accent-cyan); }
.c-badge--accent  { background: var(--vhost-accent-muted); color: var(--vhost-accent); border-color: var(--vhost-accent-muted); }

/* ---------- Tabs ---------------------------------------------------------- */

.c-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); }
.c-tabs__tab {
	padding: var(--space-sm) var(--space-md);
	color: var(--color-text-secondary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-sm);
	font-weight: 500;
	margin-bottom: -1px;
}
.c-tabs__tab:hover { color: var(--color-text-primary); }
.c-tabs__tab--active { color: var(--vhost-accent); border-bottom-color: var(--vhost-accent); }
.c-tabs__badge { background: var(--color-surface-2); padding: 0 6px; border-radius: var(--radius-full); font-size: var(--text-xs); }

/* ---------- Toast --------------------------------------------------------- */

.c-toast-region { position: fixed; bottom: var(--space-md); right: var(--space-md); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.c-toast {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--vhost-accent);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	animation: c-toast-in 180ms ease-out;
}
.c-toast--success { border-left-color: var(--color-success); }
.c-toast--warning { border-left-color: var(--color-warning); }
.c-toast--error   { border-left-color: var(--color-error); }
@keyframes c-toast-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Kanban Card --------------------------------------------------- */

.c-kcard {
	display: block;
	background: var(--color-surface-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	margin-bottom: var(--space-sm);
	color: inherit;
	text-decoration: none;
	transition: transform var(--transition-fast), border-color var(--transition-fast);
}
a.c-kcard:hover { transform: translateY(-1px); border-color: var(--vhost-accent); }
.c-kcard__header { margin-bottom: var(--space-sm); }
.c-kcard__title { margin: 0 0 4px; font-size: var(--text-base); font-weight: 600; }
.c-kcard__subtitle { margin: 0; font-size: var(--text-xs); color: var(--color-text-tertiary); }
.c-kcard__body { font-size: var(--text-sm); color: var(--color-text-secondary); }
.c-kcard__meta { margin: var(--space-sm) 0 0; font-size: var(--text-xs); display: flex; flex-wrap: wrap; gap: var(--space-md); }
.c-kcard__meta dt { color: var(--color-text-tertiary); margin-right: 4px; display: inline; }
.c-kcard__meta dd { display: inline; margin: 0; color: var(--color-text-secondary); }
.c-kcard__footer { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* ---------- Code Block ---------------------------------------------------- */

.c-codeblock { margin: var(--space-md) 0; }
.c-codeblock__caption { font-size: var(--text-xs); color: var(--color-text-tertiary); margin: 0 0 4px; }
.c-codeblock__wrap { position: relative; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.c-codeblock__pre { margin: 0; padding: var(--space-md); font-family: var(--font-mono); font-size: var(--text-sm); overflow-x: auto; line-height: 1.5; }
.c-codeblock__copy {
	position: absolute;
	top: 8px;
	right: 8px;
	background: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 4px 10px;
	font-size: var(--text-xs);
	cursor: pointer;
	color: var(--color-text-primary);
}
.c-codeblock__copy:hover { background: var(--color-surface-3); }

/* ---------- Diff View ----------------------------------------------------- */

.c-diff { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; font-family: var(--font-mono); font-size: var(--text-sm); }
.c-diff__table { width: 100%; border-collapse: collapse; }
.c-diff__num { padding: 1px 8px; color: var(--color-text-tertiary); user-select: none; text-align: right; width: 40px; font-size: var(--text-xs); }
.c-diff__marker { width: 20px; text-align: center; padding: 1px 4px; }
.c-diff__text { padding: 1px 8px; white-space: pre; }
.c-diff__row--add .c-diff__text,    .c-diff__row--add .c-diff__marker    { background: rgba(0, 200, 83, 0.12); color: var(--color-success); }
.c-diff__row--remove .c-diff__text, .c-diff__row--remove .c-diff__marker { background: rgba(255, 23, 68, 0.10); color: var(--color-error); }

/* ---------- Search Input -------------------------------------------------- */

.c-search {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--color-surface-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	padding: 6px 12px;
	max-width: 320px;
}
.c-search:focus-within { border-color: var(--vhost-accent); box-shadow: 0 0 0 3px var(--vhost-accent-muted); }
.c-search__label { position: absolute; left: -9999px; }
.c-search__icon { color: var(--color-text-tertiary); margin-right: 8px; flex-shrink: 0; }
.c-search__input { flex: 1; background: transparent; border: 0; color: var(--color-text-primary); font: inherit; outline: none; min-width: 0; }
.c-search__kbd { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 6px; margin-left: 8px; }

/* ---------- Breadcrumb ---------------------------------------------------- */

.c-breadcrumb { font-size: var(--text-sm); margin-bottom: var(--space-md); }
.c-breadcrumb__list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 4px; }
.c-breadcrumb__item { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-tertiary); }
.c-breadcrumb__link { color: var(--color-text-secondary); text-decoration: none; }
.c-breadcrumb__link:hover { color: var(--color-text-primary); text-decoration: underline; }
.c-breadcrumb__sep { color: var(--color-text-tertiary); }
.c-breadcrumb__current { color: var(--color-text-primary); font-weight: 500; }

/* ---------- Empty State --------------------------------------------------- */

.c-empty { text-align: center; padding: var(--space-xl) var(--space-lg); color: var(--color-text-secondary); }
.c-empty__icon { color: var(--color-text-tertiary); margin-bottom: var(--space-md); display: flex; justify-content: center; }
.c-empty__title { margin: 0 0 8px; font-size: var(--text-lg); color: var(--color-text-primary); }
.c-empty__message { margin: 0 0 var(--space-md); font-size: var(--text-sm); }

/* ---------- Stat Card ----------------------------------------------------- */

.c-stat {
	padding: var(--space-md);
	background: var(--color-surface-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.c-stat__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); margin: 0; }
.c-stat__value { font-size: var(--text-3xl); font-weight: 600; color: var(--color-text-primary); margin: 0; font-family: var(--font-mono); }
.c-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); }
.c-stat__delta--up   { color: var(--color-success); }
.c-stat__delta--down { color: var(--color-error); }
.c-stat__delta--flat { color: var(--color-text-tertiary); }
.c-stat__caption { font-size: var(--text-xs); color: var(--color-text-tertiary); margin: 0; }

/* ---------- Alert --------------------------------------------------------- */

.c-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	padding: var(--space-md);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	margin-bottom: var(--space-md);
}
.c-alert--info    { background: var(--color-accent-cyan-muted); border-color: var(--color-accent-cyan-muted); }
.c-alert--success { background: rgba(0, 200, 83, 0.08); border-color: rgba(0, 200, 83, 0.25); }
.c-alert--warning { background: rgba(255, 214, 0, 0.08); border-color: rgba(255, 214, 0, 0.25); }
.c-alert--error   { background: rgba(255, 23, 68, 0.08); border-color: rgba(255, 23, 68, 0.25); }
.c-alert__title { margin: 0 0 4px; font-size: var(--text-sm); font-weight: 600; }
.c-alert__message { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ---------- Button danger variant (base .btn defined in design-system.css) --- */

.btn--danger { background: var(--color-error); color: #fff; }
.btn--danger:hover { background: #d41036; }
.btn--block { width: 100%; }