/**
 * Myco panel — feedback & small widgets: banners, empty state, progress bar,
 * dropdown menu, avatar tile, code/copy, provisioning step list, misc.
 * Tokens only.
 */

/* ---- Banners ---- */

.myco-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var( --myco-radius-md );
	font-size: 14px;
	line-height: 1.5;
	background: var( --myco-tint );
	border: 1px solid var( --myco-border );
	color: var( --myco-text );
}

.myco-banner__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --myco-muted );
	flex-shrink: 0;
	margin-top: 6px;
}

.myco-banner__icon {
	flex-shrink: 0;
	margin-top: 2px;
	font-size: 16px;
	color: var( --myco-text-2 );
}

.myco-banner__text {
	flex: 1 1 0;
	min-width: 0;
}

.myco-banner__text a {
	font-weight: 600;
}

.myco-banner__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.myco-banner--warn,
.myco-banner.is-warn {
	background: var( --myco-warn-fill );
	border-color: var( --myco-warn-border );
}

.myco-banner--warn .myco-banner__dot,
.myco-banner.is-warn .myco-banner__dot {
	background: var( --myco-warn );
}

.myco-banner--warn .myco-banner__icon {
	color: var( --myco-warn-ink );
}

.myco-banner--success,
.myco-banner.is-success {
	background: var( --myco-success-fill );
	border-color: rgba( 91, 214, 174, 0.45 );
}

.myco-banner--success .myco-banner__dot,
.myco-banner.is-success .myco-banner__dot,
.myco-banner--success .myco-banner__icon {
	background: var( --myco-accent );
	color: var( --myco-accent-ink );
}

.myco-banner--success .myco-banner__icon {
	background: none;
}

.myco-banner--danger,
.myco-banner.is-error,
.myco-banner.is-danger {
	background: var( --myco-danger-fill );
	border-color: var( --myco-danger-border );
}

.myco-banner--danger .myco-banner__dot,
.myco-banner.is-error .myco-banner__dot {
	background: var( --myco-danger );
}

.myco-banner--danger .myco-banner__icon,
.myco-banner.is-error .myco-banner__icon {
	color: var( --myco-danger );
}

.myco-banner--info .myco-banner__icon {
	color: var( --myco-text-2 );
}

.myco-banner--compact {
	padding: 10px 14px;
	font-size: 13px;
	border-radius: var( --myco-radius-sm );
}

/* ---- Empty state ---- */

.myco-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 48px 24px;
	background: var( --myco-card );
	border: 1px solid var( --myco-border );
	border-radius: var( --myco-radius );
}

.myco-empty--bare {
	background: transparent;
	border: 0;
}

.myco-empty__icon {
	width: 52px;
	height: 52px;
	font-size: 24px;
	border-radius: var( --myco-radius );
	background: var( --myco-success-fill-strong );
	color: var( --myco-accent-ink );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 6px;
}

.myco-empty__title {
	font-family: var( --myco-font-display );
	font-weight: var( --myco-display-weight );
	font-size: 20px;
}

.myco-empty__text {
	font-size: 14px;
	color: var( --myco-text-2 );
	max-width: 46ch;
}

.myco-empty__actions {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ---- Progress bar ---- */

.myco-progress {
	height: 5px;
	border-radius: var( --myco-radius-pill );
	background: var( --myco-track );
	overflow: hidden;
}

.myco-progress--thick {
	height: 6px;
}

.myco-progress__bar {
	height: 100%;
	border-radius: var( --myco-radius-pill );
	background: var( --myco-accent );
	min-width: 6px;
	transition: width 0.3s ease;
}

.myco-progress--warn .myco-progress__bar,
.myco-progress__bar.is-warn {
	background: var( --myco-warn );
}

.myco-progress--danger .myco-progress__bar,
.myco-progress__bar.is-bad {
	background: var( --myco-danger );
}

.myco-progress__bar.is-indeterminate {
	width: 40%;
	animation: myco-indet 1.2s ease-in-out infinite;
}

@keyframes myco-indet {
	0% { transform: translateX( -100% ); }
	100% { transform: translateX( 260% ); }
}

.myco-meter-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: var( --myco-text-2 );
	margin-bottom: 8px;
}

/* ---- Dropdown menu ---- */

.myco-menu-wrap {
	position: relative;
	display: inline-flex;
}

.myco-menu {
	position: absolute;
	top: calc( 100% + 4px );
	right: 0;
	min-width: 210px;
	background: var( --myco-card );
	border: 1px solid var( --myco-border );
	border-radius: var( --myco-radius-md );
	box-shadow: var( --myco-shadow-pop );
	padding: 6px;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.myco-menu--left {
	right: auto;
	left: 0;
}

.myco-menu--up {
	top: auto;
	bottom: calc( 100% + 4px );
}

.myco-menu__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var( --myco-radius-xs );
	font-size: 13px;
	font-weight: 500;
	color: var( --myco-text );
	text-decoration: none;
	background: none;
	border: 0;
	width: 100%;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}

.myco-menu__item .myco-icon {
	font-size: 15px;
	color: var( --myco-text-2 );
}

.myco-menu__item:hover,
.myco-menu__item:focus-visible {
	background: var( --myco-hover );
	color: var( --myco-text );
	outline: none;
}

.myco-menu__item:disabled {
	opacity: 0.5;
	cursor: default;
}

.myco-menu__item--danger {
	color: var( --myco-danger );
	font-weight: 600;
}

.myco-menu__item--danger .myco-icon {
	color: var( --myco-danger );
}

.myco-menu__item--danger:hover {
	color: var( --myco-danger );
	background: var( --myco-danger-fill );
}

.myco-menu__sep {
	height: 1px;
	background: var( --myco-divider );
	margin: 5px 4px;
}

.myco-menu__head {
	padding: 8px 10px 6px;
	font-size: 12px;
	color: var( --myco-muted );
}

/* ---- Avatar tile (project letter) ---- */

.myco-avatar {
	width: 38px;
	height: 38px;
	border-radius: var( --myco-radius-sm );
	background: var( --myco-surface-dark );
	color: var( --myco-accent );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var( --myco-font-display );
	font-weight: var( --myco-display-weight );
	font-size: 16px;
	flex-shrink: 0;
	text-transform: uppercase;
}

.myco-avatar--lg {
	width: 46px;
	height: 46px;
	border-radius: var( --myco-radius-md );
	font-size: 20px;
}

.myco-avatar--warn { color: var( --myco-warn ); }
.myco-avatar--danger { color: var( --myco-danger-on-dark ); }
.myco-avatar--muted { color: var( --myco-muted ); }

.myco-avatar--round {
	border-radius: var( --myco-radius-pill );
	background: var( --myco-accent );
	color: var( --myco-on-accent );
	font-family: var( --myco-font-body );
	font-weight: 700;
	font-size: 12px;
	width: 30px;
	height: 30px;
}

/* ---- Code / copy ---- */

.myco-code {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var( --myco-font-mono );
	font-size: 12px;
	background: var( --myco-well );
	border-radius: var( --myco-radius-xs );
	padding: 4px 8px;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.myco-copy {
	background: none;
	border: 0;
	padding: 2px;
	color: var( --myco-muted );
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	border-radius: 4px;
}

.myco-copy:hover {
	color: var( --myco-ink );
	background: var( --myco-hover );
}

.myco-copy.is-done {
	color: var( --myco-accent-ink );
}

.myco-kbd {
	font-family: var( --myco-font-mono );
	font-size: 11px;
	padding: 1px 6px;
	border-radius: 4px;
	border: 1px solid var( --myco-border-strong );
	background: var( --myco-well );
	color: var( --myco-text-2 );
}

/* ---- Progress list (provisioning steps) ---- */

.myco-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.myco-steps__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
}

.myco-steps__badge {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --myco-border-strong );
	color: var( --myco-muted );
	font-size: 12px;
	background: var( --myco-card );
}

.myco-steps__item.is-done .myco-steps__badge {
	background: var( --myco-accent );
	border-color: var( --myco-accent );
	color: var( --myco-on-accent );
}

.myco-steps__item.is-running .myco-steps__badge {
	border: 2px solid var( --myco-accent );
	color: var( --myco-accent-ink );
}

.myco-steps__item.is-failed .myco-steps__badge {
	border-color: var( --myco-danger );
	color: var( --myco-danger );
}

.myco-steps__item.is-pending {
	opacity: 0.55;
}

.myco-steps__title {
	font-weight: 600;
}

.myco-steps__desc {
	display: block;
	font-size: 13px;
	color: var( --myco-text-2 );
}

/* ---- Misc ---- */

.myco-divider {
	height: 1px;
	background: var( --myco-divider );
	border: 0;
	margin: 0;
}

.myco-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --myco-muted );
}

.myco-dot--ok { background: var( --myco-accent ); }
.myco-dot--warn { background: var( --myco-warn ); }
.myco-dot--bad { background: var( --myco-danger ); }

.myco-soon {
	font-size: 11px;
	font-weight: 600;
	color: var( --myco-warn-ink );
	background: var( --myco-warn-pill );
	border-radius: var( --myco-radius-pill );
	padding: 2px 8px;
	margin-left: 6px;
	vertical-align: middle;
}

.myco-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var( --myco-link );
	text-decoration: none;
}

.myco-loader {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var( --myco-text-2 );
	font-size: 13px;
}

@media ( max-width: 640px ) {
	.myco-table {
		min-width: 0;
	}

	.myco-list__row {
		flex-wrap: wrap;
	}

	.myco-list__side {
		white-space: normal;
	}

	.myco-banner {
		flex-wrap: wrap;
	}

	.myco-banner__actions {
		width: 100%;
	}
}