/**
 * MyBot dashboard — modern SaaS.
 *
 * Conventions:
 *   - Every class is prefixed with mb- and lives inside .mb-app so it does not affect wp-admin.
 *   - Colors, radii and shadows all come from the CSS variables below.
 *
 * @package MyBot
 */

/* =====================================================================
   1. Design tokens
   ===================================================================== */
.mb-app {
	--mb-canvas: #f6f7f9;
	--mb-surface: #ffffff;
	--mb-surface-alt: #fafbfc;
	--mb-border: #e4e7ec;
	--mb-border-strong: #d0d5dd;

	--mb-text: #101828;
	--mb-text-soft: #475467;
	--mb-muted: #667085;

	--mb-primary: #2563eb;
	--mb-primary-hover: #1d4ed8;
	--mb-primary-soft: #eff4ff;

	--mb-good: #079455;
	--mb-good-soft: #ecfdf3;
	--mb-warn: #dc6803;
	--mb-warn-soft: #fffaeb;
	--mb-bad: #d92d20;
	--mb-bad-soft: #fef3f2;
	--mb-info-soft: #eff8ff;

	--mb-radius-lg: 12px;
	--mb-radius-md: 8px;
	--mb-radius-sm: 6px;

	--mb-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
	--mb-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
	--mb-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);

	--mb-sidebar-w: 248px;

	background: var(--mb-canvas);
	color: var(--mb-text);
	display: grid;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	font-size: 13px;
	grid-template-columns: var(--mb-sidebar-w) minmax(0, 1fr);
	line-height: 1.55;
	min-height: calc(100vh - 32px);
}

.mb-app *,
.mb-app *::before,
.mb-app *::after {
	box-sizing: border-box;
}

.mb-app :focus-visible {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28);
	outline: 2px solid transparent;
}

/* =====================================================================
   2. Sidebar
   ===================================================================== */
.mb-sidebar {
	background: var(--mb-surface);
	border-right: 1px solid var(--mb-border);
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px 14px;
	position: sticky;
	top: 32px;
	height: calc(100vh - 32px);
}

.mb-brand {
	align-items: center;
	display: flex;
	gap: 10px;
	padding: 0 8px;
}

/*
 * The brand mark in the React sidebar.
 *
 * The glyph between the quotes is what admin/src/App.js renders, and this environment cannot
 * rebuild the bundle (npm install is blocked by the sandbox), so the logo is applied here instead
 * of in the JSX. It replaces the plain blue tile with the actual brand mark at the same size.
 *
 * When the bundle is next rebuilt, put the <img> into App.js and delete this rule — a stylesheet
 * that paints over a component is a note to the next person, not a design.
 */
.mb-brand__mark {
	align-items: center;
	background: transparent url(../../assets/images/mybot-logo.png) center/contain no-repeat;
	border-radius: 10px;
	color: transparent;
	display: inline-flex;
	font-size: 16px;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.mb-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.mb-brand__text strong {
	font-size: 14px;
	font-weight: 650;
}

.mb-brand__text small {
	color: var(--mb-muted);
	font-size: 11px;
}

.mb-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mb-nav__item {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--mb-radius-md);
	color: var(--mb-text-soft);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 13px;
	font-weight: 550;
	gap: 10px;
	padding: 9px 10px;
	text-align: left;
	transition: background 0.15s ease, color 0.15s ease;
	width: 100%;
}

.mb-nav__item:hover {
	background: var(--mb-surface-alt);
	color: var(--mb-text);
}

.mb-nav__item.is-active {
	background: var(--mb-primary-soft);
	color: var(--mb-primary);
}

.mb-nav__item--muted {
	margin-top: 10px;
}

.mb-nav__icon {
	font-size: 14px;
	text-align: center;
	width: 18px;
}

.mb-sidebar__foot {
	border-top: 1px solid var(--mb-border);
	margin-top: auto;
	padding: 14px 10px 0;
}

.mb-sidebar__foot a {
	color: var(--mb-muted);
	font-size: 12px;
	text-decoration: none;
}

.mb-sidebar__foot a:hover {
	color: var(--mb-primary);
}

/* =====================================================================
   3. Content area
   ===================================================================== */
.mb-main {
	min-width: 0;
	padding: 24px 28px 48px;
}

.mb-topbar {
	margin-bottom: 20px;
}

.mb-topbar__title {
	color: var(--mb-text);
	font-size: 20px;
	font-weight: 650;
	letter-spacing: -0.01em;
	margin: 0;
	padding: 0;
}

.mb-topbar__sub {
	color: var(--mb-muted);
	margin: 4px 0 0;
}

.mb-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mb-two-col {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.mb-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mb-row--between {
	justify-content: space-between;
}

.mb-mt {
	margin-top: 12px;
}

.mb-muted {
	color: var(--mb-muted);
}

.mb-cap {
	text-transform: capitalize;
}

.mb-text-bad {
	color: var(--mb-bad);
}

.mb-error {
	color: var(--mb-bad);
}

.mb-truncate {
	display: inline-block;
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
	white-space: nowrap;
}

.mb-app code {
	background: var(--mb-surface-alt);
	border: 1px solid var(--mb-border);
	border-radius: var(--mb-radius-sm);
	color: var(--mb-text-soft);
	font-size: 12px;
	padding: 2px 6px;
}

/* =====================================================================
   4. Card
   ===================================================================== */
.mb-card {
	background: var(--mb-surface);
	border: 1px solid var(--mb-border);
	border-radius: var(--mb-radius-lg);
	box-shadow: var(--mb-shadow-xs);
	overflow: hidden;
}

.mb-card__head {
	align-items: flex-start;
	border-bottom: 1px solid var(--mb-border);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 16px 18px;
}

.mb-card__heading {
	min-width: 0;
}

.mb-card__title {
	font-size: 14px;
	font-weight: 650;
	margin: 0;
	padding: 0;
}

.mb-card__desc {
	color: var(--mb-muted);
	font-size: 12px;
	margin: 2px 0 0;
}

.mb-card__actions {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: 8px;
}

.mb-card__body {
	padding: 16px 18px;
}

.mb-card__body--flush {
	padding: 0;
}

/* =====================================================================
   5. Statistics
   ===================================================================== */
.mb-stats-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.mb-stats-grid--four {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.mb-stat {
	background: var(--mb-surface);
	border: 1px solid var(--mb-border);
	border-left: 3px solid var(--mb-border-strong);
	border-radius: var(--mb-radius-lg);
	box-shadow: var(--mb-shadow-xs);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
}

.mb-stat--good {
	border-left-color: var(--mb-good);
}

.mb-stat--warn {
	border-left-color: var(--mb-warn);
}

.mb-stat--bad {
	border-left-color: var(--mb-bad);
}

.mb-stat__label {
	color: var(--mb-muted);
	font-size: 12px;
	font-weight: 500;
}

.mb-stat__value {
	color: var(--mb-text);
	font-size: 22px;
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.mb-stat__hint {
	color: var(--mb-muted);
	font-size: 11px;
}

/* =====================================================================
   6. Button
   ===================================================================== */
.mb-btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--mb-radius-md);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 13px;
	font-weight: 550;
	gap: 6px;
	justify-content: center;
	padding: 7px 13px;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}

.mb-btn--sm {
	font-size: 12px;
	padding: 5px 10px;
}

.mb-btn--primary {
	background: var(--mb-primary);
	color: #fff;
	box-shadow: var(--mb-shadow-xs);
}

.mb-btn--primary:hover:not(:disabled) {
	background: var(--mb-primary-hover);
}

.mb-btn--secondary {
	background: var(--mb-surface);
	border-color: var(--mb-border-strong);
	color: var(--mb-text-soft);
	box-shadow: var(--mb-shadow-xs);
}

.mb-btn--secondary:hover:not(:disabled) {
	background: var(--mb-surface-alt);
	color: var(--mb-text);
}

.mb-btn--danger {
	background: var(--mb-surface);
	border-color: #fda29b;
	color: var(--mb-bad);
}

.mb-btn--danger:hover:not(:disabled) {
	background: var(--mb-bad-soft);
}

.mb-btn--ghost {
	background: transparent;
	color: var(--mb-muted);
}

.mb-btn--ghost:hover:not(:disabled) {
	background: var(--mb-surface-alt);
	color: var(--mb-text);
}

.mb-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.mb-btn__spinner {
	animation: mb-spin 0.7s linear infinite;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-right-color: transparent;
	display: inline-block;
	height: 12px;
	width: 12px;
}

/* =====================================================================
   7. Badge
   ===================================================================== */
.mb-badge {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 11px;
	font-weight: 600;
	gap: 4px;
	line-height: 1.6;
	padding: 1px 9px;
	white-space: nowrap;
}

.mb-badge--neutral {
	background: var(--mb-surface-alt);
	border: 1px solid var(--mb-border);
	color: var(--mb-text-soft);
}

.mb-badge--good {
	background: var(--mb-good-soft);
	border: 1px solid #abefc6;
	color: var(--mb-good);
}

.mb-badge--warn {
	background: var(--mb-warn-soft);
	border: 1px solid #fedf89;
	color: var(--mb-warn);
}

.mb-badge--bad {
	background: var(--mb-bad-soft);
	border: 1px solid #fecdca;
	color: var(--mb-bad);
}

.mb-badge--info {
	background: var(--mb-info-soft);
	border: 1px solid #b2ddff;
	color: #175cd3;
}

/* =====================================================================
   8. Progress, loading and empty states
   ===================================================================== */
.mb-progress-row {
	align-items: center;
	display: flex;
	gap: 12px;
}

.mb-progress {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: 10px;
	min-width: 0;
}

.mb-progress__track {
	background: var(--mb-surface-alt);
	border: 1px solid var(--mb-border);
	border-radius: 999px;
	flex: 1 1 auto;
	height: 8px;
	overflow: hidden;
}

.mb-progress__fill {
	background: var(--mb-primary);
	border-radius: 999px;
	height: 100%;
	transition: width 0.4s ease;
}

.mb-progress__label {
	color: var(--mb-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	min-width: 36px;
	text-align: right;
}

.mb-loading {
	align-items: center;
	color: var(--mb-muted);
	display: flex;
	gap: 10px;
	padding: 28px 0;
}

.mb-spinner {
	animation: mb-spin 0.7s linear infinite;
	border: 2px solid var(--mb-border-strong);
	border-radius: 50%;
	border-top-color: var(--mb-primary);
	display: inline-block;
	height: 60px;
	height: 18px;
	width: 18px;
}

@keyframes mb-spin {
	to {
		transform: rotate(360deg);
	}
}

.mb-empty {
	padding: 32px 16px;
	text-align: center;
}

.mb-empty__icon {
	color: var(--mb-border-strong);
	font-size: 34px;
	line-height: 1;
}

.mb-empty__title {
	font-size: 14px;
	font-weight: 650;
	margin: 10px 0 4px;
}

.mb-empty__desc {
	color: var(--mb-muted);
	margin: 0 auto 14px;
	max-width: 420px;
}

/* =====================================================================
   9. Callout and key–value list
   ===================================================================== */
.mb-callout {
	background: var(--mb-surface);
	border: 1px solid var(--mb-border);
	border-left: 3px solid var(--mb-border-strong);
	border-radius: var(--mb-radius-lg);
	padding: 12px 16px;
}

.mb-callout--bad {
	background: var(--mb-bad-soft);
	border-color: #fecdca;
	border-left-color: var(--mb-bad);
}

.mb-callout p {
	margin: 4px 0 2px;
}

.mb-kv {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mb-kv li {
	align-items: center;
	border-bottom: 1px solid var(--mb-border);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 9px 0;
}

.mb-kv li:last-child {
	border-bottom: 0;
}

.mb-kv li > span:first-child {
	color: var(--mb-text-soft);
}

.mb-kv--wide li {
	align-items: flex-start;
}

.mb-result {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	text-align: right;
}

/* =====================================================================
   10. Table
   ===================================================================== */
.mb-table-wrap {
	overflow-x: auto;
}

.mb-table {
	border-collapse: collapse;
	font-size: 12px;
	width: 100%;
}

.mb-table th {
	background: var(--mb-surface-alt);
	border-bottom: 1px solid var(--mb-border);
	color: var(--mb-muted);
	font-weight: 600;
	padding: 9px 12px;
	text-align: left;
	white-space: nowrap;
}

.mb-table td {
	border-bottom: 1px solid var(--mb-border);
	color: var(--mb-text-soft);
	padding: 9px 12px;
	vertical-align: top;
}

.mb-table tr:last-child td {
	border-bottom: 0;
}

/* =====================================================================
   11. Conversations
   ===================================================================== */
.mb-chat-layout {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.mb-session-list {
	list-style: none;
	margin: 0;
	max-height: 620px;
	overflow-y: auto;
	padding: 0;
}

.mb-session {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--mb-border);
	border-left: 3px solid transparent;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font-family: inherit;
	gap: 2px;
	padding: 10px 14px;
	text-align: left;
	transition: background 0.15s ease;
	width: 100%;
}

.mb-session:hover {
	background: var(--mb-surface-alt);
}

.mb-session.is-active {
	background: var(--mb-primary-soft);
	border-left-color: var(--mb-primary);
}

.mb-session__id {
	color: var(--mb-text);
	font-family: Consolas, Monaco, monospace;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mb-session__meta {
	color: var(--mb-muted);
	font-size: 11px;
}

.mb-thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 620px;
	overflow-y: auto;
	padding-right: 4px;
}

.mb-bubble {
	border: 1px solid var(--mb-border);
	border-radius: var(--mb-radius-lg);
	max-width: 78%;
	padding: 10px 14px;
}

.mb-bubble--bot {
	align-self: flex-start;
	background: var(--mb-surface-alt);
}

.mb-bubble--user {
	align-self: flex-end;
	background: var(--mb-primary-soft);
	border-color: #b2ccff;
}

.mb-bubble__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 5px;
}

.mb-bubble__meta strong {
	font-size: 12px;
}

.mb-bubble__meta .mb-muted {
	font-size: 11px;
	margin-left: auto;
}

.mb-bubble__text {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
}

/* =====================================================================
   12. Toasts
   ===================================================================== */
.mb-toasts {
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: fixed;
	right: 24px;
	z-index: 100000;
}

.mb-toast {
	align-items: center;
	animation: mb-toast-in 0.2s ease;
	background: var(--mb-text);
	border-radius: var(--mb-radius-md);
	box-shadow: var(--mb-shadow-md);
	color: #fff;
	display: flex;
	font-size: 12px;
	gap: 12px;
	max-width: 380px;
	padding: 10px 12px;
}

.mb-toast--good {
	background: #054f31;
}

.mb-toast--bad {
	background: #912018;
}

.mb-toast__close {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	opacity: 0.7;
	padding: 0 2px;
}

.mb-toast__close:hover {
	opacity: 1;
}

@keyframes mb-toast-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* =====================================================================
   13. Knowledge import from file
   ===================================================================== */
.mb-pad {
	padding: 16px 18px;
}

.mb-drop {
	background: var(--mb-surface-alt);
	border: 2px dashed var(--mb-border-strong);
	border-radius: var(--mb-radius-lg);
	transition: background 0.15s ease, border-color 0.15s ease;
}

.mb-drop:hover,
.mb-drop.is-dragging {
	background: var(--mb-primary-soft);
	border-color: var(--mb-primary);
}

.mb-drop__input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.mb-drop__label {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 30px 20px;
	text-align: center;
}

.mb-drop__icon {
	color: var(--mb-primary);
	font-size: 22px;
	line-height: 1;
}

.mb-file {
	align-items: center;
	background: var(--mb-surface-alt);
	border: 1px solid var(--mb-border);
	border-radius: var(--mb-radius-md);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 10px 14px;
}

.mb-file__info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.mb-file__info strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mb-field-row {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.mb-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mb-field > span {
	color: var(--mb-text-soft);
	font-size: 12px;
	font-weight: 550;
}

.mb-field select {
	background: var(--mb-surface);
	border: 1px solid var(--mb-border-strong);
	border-radius: var(--mb-radius-md);
	box-shadow: var(--mb-shadow-xs);
	color: var(--mb-text);
	font-family: inherit;
	font-size: 13px;
	max-width: none;
	padding: 6px 10px;
	width: 100%;
}

.mb-preview {
	background: var(--mb-surface-alt);
	border: 1px solid var(--mb-border);
	border-radius: var(--mb-radius-md);
	padding: 12px 14px;
}

.mb-preview__list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.mb-preview__list li {
	border-top: 1px solid var(--mb-border);
	padding: 8px 0;
}

.mb-preview__list li:first-child {
	border-top: 0;
}

.mb-preview__list li > strong {
	display: block;
}

.mb-preview__list li > .mb-muted {
	font-size: 11px;
}

.mb-preview__excerpt {
	color: var(--mb-text-soft);
	font-size: 12px;
	margin: 3px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mb-templates {
	align-items: center;
	border-top: 1px solid var(--mb-border);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
	padding-top: 12px;
}

.mb-templates a {
	color: var(--mb-primary);
	font-size: 12px;
	text-decoration: none;
}

.mb-templates a:hover {
	text-decoration: underline;
}

.mb-entry-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mb-entry-list li {
	align-items: center;
	border-bottom: 1px solid var(--mb-border);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 10px 18px;
}

.mb-entry-list li:last-child {
	border-bottom: 0;
}

.mb-entry__main {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.mb-entry__main strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mb-entry__main .mb-muted {
	font-size: 11px;
}

.mb-entry__side {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: 8px;
}

/* =====================================================================
   14. Small screen responsiveness
   ===================================================================== */
@media screen and (max-width: 960px) {
	.mb-app {
		grid-template-columns: 1fr;
	}

	.mb-sidebar {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		height: auto;
		overflow-x: auto;
		padding: 10px 14px;
		position: static;
	}

	.mb-nav {
		flex-direction: row;
	}

	.mb-nav__item--muted {
		margin-top: 0;
	}

	.mb-sidebar__foot {
		border-top: 0;
		margin: 0 0 0 auto;
		padding: 0;
	}

	.mb-main {
		padding: 18px 16px 40px;
	}

	.mb-chat-layout {
		grid-template-columns: 1fr;
	}

	.mb-bubble {
		max-width: 92%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mb-app *,
	.mb-app *::before,
	.mb-app *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}