/**
 * Trendly AI Post — admin app UI.
 * Everything is scoped under #trendly-app-root so we never leak into wp-admin.
 * Design language mirrors the AImpact toolkit (purple gradient system).
 */

// ---------- Design tokens ----------
#trendly-app-root {
	--tap-brand: #6d5efc;
	--tap-brand-2: #9b5cff;
	--tap-brand-ink: #4b3fd6;
	--tap-grad: linear-gradient(135deg, #6d5efc 0%, #9b5cff 55%, #b06bff 100%);

	--tap-bg: #f4f5fb;
	--tap-surface: #ffffff;
	--tap-surface-2: #f8f9fe;
	--tap-border: #e6e8f2;
	--tap-ink: #1c1d2b;
	--tap-ink-2: #5b5e75;
	--tap-ink-3: #8a8ea6;

	--tap-good: #1f9d6b;
	--tap-good-bg: #e6f7ef;
	--tap-warn: #c9820a;
	--tap-warn-bg: #fdf3e0;
	--tap-danger: #d94a4a;
	--tap-danger-bg: #fdecec;
	--tap-info: #2f6fed;
	--tap-info-bg: #e8f0fe;

	--tap-radius: 16px;
	--tap-radius-sm: 10px;
	--tap-shadow: 0 1px 2px rgba(24, 24, 60, .04), 0 8px 24px rgba(24, 24, 60, .06);
	--tap-shadow-lg: 0 12px 40px rgba(78, 63, 214, .18);

	margin: 0;
	color: var(--tap-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;

	* { box-sizing: border-box; }
}

// wp-admin adds white gaps; kill them for a true app canvas.
.trendly-app {
	background: var(--tap-bg);
	margin-left: -20px;
	min-height: calc(100vh - 32px);
}
.trendly-app .trendly-boot { padding: 40px; color: #8a8ea6; }

// ---------- Shell ----------
#trendly-app-root {
	.tap-shell {
		display: grid;
		grid-template-columns: 264px 1fr;
		min-height: calc(100vh - 32px);
	}
	@media (max-width: 900px) {
		.tap-shell { grid-template-columns: 1fr; }
	}
}

// ---------- Sidebar ----------
#trendly-app-root {
	.tap-sidebar {
		background: #14152a;
		background-image: radial-gradient(1200px 400px at -10% -10%, rgba(157, 92, 255, .25), transparent 60%);
		color: #cfd1e6;
		padding: 26px 18px;
		display: flex;
		flex-direction: column;
		position: sticky;
		top: 32px;
		height: calc(100vh - 32px);
	}
	.tap-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 22px; }
	.tap-brand__mark {
		width: 40px; height: 40px;
		border-radius: 12px;
		display: grid; place-items: center;
		background: var(--tap-grad);
		color: #fff;
		box-shadow: var(--tap-shadow-lg);
	}
	.tap-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
	.tap-brand__text strong { font-size: 17px; color: #fff; letter-spacing: .2px; }
	.tap-brand__text span { font-size: 12px; color: #8f92b8; }

	.tap-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
	.tap-nav__item {
		display: flex; align-items: center; gap: 12px;
		padding: 11px 14px;
		border: 0; background: transparent;
		color: #b9bce0;
		border-radius: 11px;
		font-size: 14px; font-weight: 500;
		cursor: pointer;
		text-align: left;
		transition: all .15s ease;
		width: 100%;
	}
	.tap-nav__item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
	.tap-nav__item.is-active {
		background: var(--tap-grad);
		color: #fff;
		box-shadow: var(--tap-shadow-lg);
	}
	.tap-nav__item svg { flex: none; }
	.tap-nav__badge {
		margin-left: auto;
		background: #ff5b6a; color: #fff;
		font-size: 11px; font-weight: 700;
		min-width: 18px; height: 18px; padding: 0 5px;
		border-radius: 999px;
		display: grid; place-items: center;
	}

	.tap-sidebar__footer {
		margin-top: auto;
		padding: 16px 12px 4px;
		border-top: 1px solid rgba(255, 255, 255, .08);
	}
	.tap-sidebar__footer p { font-size: 12px; color: #8f92b8; margin: 10px 0 0; line-height: 1.5; }
}

// ---------- Main / page ----------
#trendly-app-root {
	.tap-main { padding: 30px 34px 60px; overflow-x: hidden; }
	.tap-page { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

	.tap-page__head {
		display: flex; align-items: flex-start; justify-content: space-between;
		gap: 16px;
	}
	.tap-page__head h1 { font-size: 26px; margin: 0 0 4px; font-weight: 700; letter-spacing: -.3px; }
	.tap-page__lead { margin: 0; color: var(--tap-ink-2); font-size: 14.5px; max-width: 640px; }
	.tap-page__actions { display: flex; gap: 8px; flex: none; }
}

// ---------- Cards ----------
#trendly-app-root {
	.tap-card {
		background: var(--tap-surface);
		border: 1px solid var(--tap-border);
		border-radius: var(--tap-radius);
		box-shadow: var(--tap-shadow);
		padding: 22px;
	}
	.tap-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
	.tap-card__title { margin: 0; font-size: 16px; font-weight: 650; }
	.tap-card__subtitle { margin: 4px 0 0; color: var(--tap-ink-2); font-size: 13px; }
	.tap-card__foot { margin: 16px 0 0; font-size: 13px; }
	.tap-card__foot a { color: var(--tap-brand-ink); text-decoration: none; font-weight: 600; }
	.tap-card__foot a:hover { text-decoration: underline; }
}

// ---------- Grids ----------
#trendly-app-root {
	.tap-grid { display: grid; gap: 18px; }
	.tap-grid--stats { grid-template-columns: repeat(3, 1fr); }
	.tap-grid--2 { grid-template-columns: 1fr 1fr; }
	.tap-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.tap-grid--dash { grid-template-columns: 1.1fr 1fr 1fr; }
	@media (max-width: 900px) {
		.tap-grid--stats, .tap-grid--2, .tap-grid--3, .tap-grid--dash { grid-template-columns: 1fr; }
	}
}

// ---------- Stat tiles ----------
#trendly-app-root {
	.tap-stat {
		background: var(--tap-surface);
		border: 1px solid var(--tap-border);
		border-radius: var(--tap-radius);
		box-shadow: var(--tap-shadow);
		padding: 20px;
		display: flex; align-items: center; gap: 14px;
	}
	.tap-stat__icon {
		width: 46px; height: 46px; flex: none;
		border-radius: 12px;
		display: grid; place-items: center;
		font-size: 22px;
		background: var(--tap-surface-2);
	}
	.tap-stat__value { font-size: 28px; font-weight: 750; line-height: 1; letter-spacing: -.5px; }
	.tap-stat__label { color: var(--tap-ink-2); font-size: 13px; margin-top: 5px; }
	.tap-stat__hint { color: var(--tap-ink-3); font-size: 12px; margin-top: 3px; }
	.tap-stat--warn .tap-stat__value { color: var(--tap-warn); }
	.tap-stat--good .tap-stat__value { color: var(--tap-good); }
	.tap-stat--brand .tap-stat__value { color: var(--tap-brand-ink); }
}

// ---------- Buttons ----------
#trendly-app-root {
	.tap-btn {
		display: inline-flex; align-items: center; justify-content: center; gap: 8px;
		border: 1px solid transparent;
		border-radius: 11px;
		font-weight: 600;
		font-size: 14px;
		cursor: pointer;
		transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
		white-space: nowrap;
		line-height: 1;
		text-decoration: none;
	}
	.tap-btn:active { transform: translateY(1px); }
	.tap-btn--sm { padding: 7px 12px; font-size: 13px; }
	.tap-btn--md { padding: 10px 16px; }
	.tap-btn--lg { padding: 13px 22px; font-size: 15px; }

	.tap-btn--primary {
		background: var(--tap-grad);
		color: #fff;
		box-shadow: 0 6px 16px rgba(109, 94, 252, .3);
	}
	.tap-btn--primary:hover { box-shadow: 0 8px 22px rgba(109, 94, 252, .42); color: #fff; }
	.tap-btn--ghost {
		background: var(--tap-surface);
		border-color: var(--tap-border);
		color: var(--tap-ink);
	}
	.tap-btn--ghost:hover { background: var(--tap-surface-2); color: var(--tap-ink); }
	.tap-btn--danger { background: var(--tap-danger); color: #fff; }
	.tap-btn--danger:hover { color: #fff; }
	.tap-btn:disabled { opacity: .5; cursor: not-allowed; }

	.tap-btn__spinner {
		width: 14px; height: 14px;
		border: 2px solid rgba(255, 255, 255, .45);
		border-top-color: #fff;
		border-radius: 50%;
		animation: tap-spin .7s linear infinite;
	}
	.tap-btn--ghost .tap-btn__spinner { border-color: rgba(0, 0, 0, .2); border-top-color: var(--tap-ink); }
}

// ---------- Badges / pills ----------
#trendly-app-root {
	.tap-badge {
		display: inline-flex; align-items: center;
		padding: 3px 10px;
		border-radius: 999px;
		font-size: 11.5px; font-weight: 650;
		letter-spacing: .2px;
	}
	.tap-badge--neutral { background: var(--tap-surface-2); color: var(--tap-ink-2); }
	.tap-badge--good { background: var(--tap-good-bg); color: var(--tap-good); }
	.tap-badge--warn { background: var(--tap-warn-bg); color: var(--tap-warn); }
	.tap-badge--danger { background: var(--tap-danger-bg); color: var(--tap-danger); }
	.tap-badge--info { background: var(--tap-info-bg); color: var(--tap-info); }
	.tap-badge--brand { background: rgba(109, 94, 252, .12); color: var(--tap-brand-ink); }
}

// ---------- Toggle ----------
#trendly-app-root {
	.tap-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
	.tap-toggle.is-disabled { opacity: .55; cursor: not-allowed; }
	.tap-toggle__track {
		width: 42px; height: 24px;
		border-radius: 999px;
		background: #d4d6e6;
		position: relative;
		transition: background .18s ease;
		flex: none;
	}
	.tap-toggle__track.is-on { background: var(--tap-brand); }
	.tap-toggle__thumb {
		position: absolute; top: 3px; left: 3px;
		width: 18px; height: 18px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
		transition: transform .18s ease;
	}
	.tap-toggle__track.is-on .tap-toggle__thumb { transform: translateX(18px); }
	.tap-toggle__label { font-size: 13.5px; color: var(--tap-ink-2); font-weight: 500; }
}

// ---------- Status list (setup status) ----------
#trendly-app-root {
	.tap-status { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
	.tap-status li {
		display: flex; align-items: center; gap: 12px;
		padding: 12px 0; border-top: 1px solid var(--tap-border);
	}
	.tap-status li:first-child { border-top: 0; }
	.tap-status__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--tap-ink-3); }
	.tap-status li.is-ok .tap-status__dot { background: var(--tap-good); }
	.tap-status li.is-warn .tap-status__dot { background: var(--tap-warn); }
	.tap-status li.is-info .tap-status__dot { background: var(--tap-info); }
	.tap-status__label { font-size: 14px; }
	.tap-status__value { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--tap-ink-2); }
	.tap-status li.is-ok .tap-status__value { color: var(--tap-good); }
	.tap-status li.is-warn .tap-status__value { color: var(--tap-warn); }
}

// ---------- CTA / coverage / cross-promo ----------
#trendly-app-root {
	.tap-cta {
		display: flex; align-items: center; justify-content: space-between; gap: 18px;
		background: linear-gradient(120deg, #ffffff 0%, #f5f3ff 100%);
		border-color: #e5deff;
	}
	.tap-cta__body { display: flex; gap: 16px; align-items: center; }
	.tap-cta__icon { font-size: 30px; }
	.tap-cta h3 { margin: 0 0 4px; font-size: 16px; }
	.tap-cta p { margin: 0; color: var(--tap-ink-2); font-size: 13.5px; max-width: 520px; }

	.tap-ring { position: relative; flex: none; }
	.tap-ring__bg { stroke: #ecedf6; }
	.tap-ring__fg { stroke: var(--tap-brand); transition: stroke-dashoffset .6s ease; }
	.tap-ring__label {
		position: absolute; inset: 0;
		display: flex; flex-direction: column; align-items: center; justify-content: center;
	}
	.tap-ring__label strong { font-size: 24px; font-weight: 750; }
	.tap-ring__label span { font-size: 11px; color: var(--tap-ink-3); }

	.tap-cross { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
	.tap-cross a {
		display: flex; flex-direction: column; gap: 2px;
		padding: 12px 14px;
		border: 1px solid var(--tap-border);
		border-radius: var(--tap-radius-sm);
		text-decoration: none;
		transition: all .15s ease;
	}
	.tap-cross a:hover { border-color: var(--tap-brand); background: var(--tap-surface-2); }
	.tap-cross strong { color: var(--tap-ink); font-size: 14px; }
	.tap-cross span { color: var(--tap-ink-3); font-size: 12.5px; }
}

// ---------- Quick actions ----------
#trendly-app-root {
	.tap-quick { display: flex; flex-direction: column; gap: 10px; }
	.tap-quick .tap-btn { width: 100%; }
}

// ---------- Tables ----------
#trendly-app-root {
	.tap-table { width: 100%; border-collapse: collapse; }
	.tap-table th {
		text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
		color: var(--tap-ink-3); padding: 0 12px 10px; border-bottom: 1px solid var(--tap-border); font-weight: 700;
	}
	.tap-table td { padding: 13px 12px; border-bottom: 1px solid var(--tap-border); font-size: 14px; vertical-align: middle; }
	.tap-table tr:last-child td { border-bottom: 0; }
	.tap-table a { color: var(--tap-brand-ink); text-decoration: none; font-weight: 600; }
	.tap-table a:hover { text-decoration: underline; }
	.tap-table__actions { display: flex; gap: 12px; }
}

// ---------- Pills (post status) ----------
#trendly-app-root {
	.tap-pill { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
	.tap-pill--publish { background: var(--tap-good-bg); color: var(--tap-good); }
	.tap-pill--draft { background: var(--tap-surface-2); color: var(--tap-ink-2); }
	.tap-pill--pending { background: var(--tap-warn-bg); color: var(--tap-warn); }
	.tap-pill--future { background: var(--tap-info-bg); color: var(--tap-info); }
	.tap-pill--private { background: var(--tap-danger-bg); color: var(--tap-danger); }
}

// ---------- Fields / inputs ----------
#trendly-app-root {
	.tap-field { margin-top: 16px; }
	.tap-field:first-child { margin-top: 0; }
	.tap-field__label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
	.tap-field__hint { margin: 7px 0 0; font-size: 12.5px; color: var(--tap-ink-3); }
	.tap-field__hint a { color: var(--tap-brand-ink); }

	.tap-input, .tap-select, textarea.tap-input {
		width: 100%;
		border: 1px solid var(--tap-border);
		border-radius: 10px;
		padding: 10px 12px;
		font-size: 14px;
		background: var(--tap-surface);
		color: var(--tap-ink);
		font-family: inherit;
	}
	textarea.tap-input { resize: vertical; }
	.tap-input:focus, .tap-select:focus, textarea.tap-input:focus {
		outline: none; border-color: var(--tap-brand); box-shadow: 0 0 0 3px rgba(109, 94, 252, .12);
	}

	.tap-key-row { display: flex; gap: 10px; }
	.tap-key-row .tap-input { flex: 1; }
	@media (max-width: 640px) { .tap-key-row { flex-direction: column; } }

	.tap-provider-select { display: flex; gap: 12px; flex-wrap: wrap; }
	.tap-provider {
		display: flex; align-items: center; gap: 10px;
		padding: 12px 16px;
		border: 1.5px solid var(--tap-border);
		border-radius: 12px;
		background: var(--tap-surface);
		cursor: pointer;
		transition: all .15s ease;
	}
	.tap-provider:hover { border-color: #cfc9fb; }
	.tap-provider.is-active { border-color: var(--tap-brand); background: #f7f5ff; }
	.tap-provider__name { font-weight: 600; font-size: 14px; }

	.tap-switch-row {
		display: flex; align-items: center; justify-content: space-between; gap: 18px;
		padding: 16px 0;
		border-top: 1px solid var(--tap-border);
	}
	.tap-switch-row:first-of-type { border-top: 0; }
	.tap-switch-row strong { font-size: 14px; }
	.tap-switch-row p { margin: 3px 0 0; color: var(--tap-ink-2); font-size: 13px; }

	.tap-sticky-save {
		position: sticky; bottom: 0;
		display: flex; justify-content: flex-end; gap: 10px;
		padding: 14px 0;
		background: linear-gradient(0deg, var(--tap-bg) 60%, transparent);
	}
}

// ---------- Notices ----------
#trendly-app-root {
	.tap-notice {
		display: flex; gap: 12px; align-items: flex-start;
		padding: 14px 16px; border-radius: var(--tap-radius-sm);
		font-size: 13.5px; line-height: 1.5;
	}
	.tap-notice a { font-weight: 600; }
	.tap-notice--warn { background: var(--tap-warn-bg); color: #7a5300; }
	.tap-notice--warn a { color: #7a5300; }
	.tap-notice--error { background: var(--tap-danger-bg); color: #9a2b2b; }
	.tap-notice--info { background: var(--tap-info-bg); color: #1c4bad; }
	.tap-notice--info a { color: #1c4bad; }
	.tap-notice__icon { font-size: 16px; flex: none; }
}

// ---------- Bars (analytics) ----------
#trendly-app-root {
	.tap-bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 10px; }
	.tap-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
	.tap-bar__fill { width: 100%; max-width: 34px; background: var(--tap-grad); border-radius: 6px 6px 0 0; min-height: 3px; transition: height .4s ease; }
	.tap-bar__label { font-size: 10.5px; color: var(--tap-ink-3); white-space: nowrap; }
	.tap-bar__value { font-size: 11px; font-weight: 700; color: var(--tap-ink-2); }

	.tap-breakdown { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
	.tap-breakdown li { display: flex; align-items: center; gap: 12px; }
	.tap-breakdown__label { font-size: 13px; width: 110px; flex: none; color: var(--tap-ink-2); }
	.tap-breakdown__track { flex: 1; height: 8px; border-radius: 999px; background: #ecedf6; overflow: hidden; }
	.tap-breakdown__fill { height: 100%; background: var(--tap-grad); border-radius: 999px; }
	.tap-breakdown__value { font-size: 13px; font-weight: 700; width: 40px; text-align: right; flex: none; }
}

// ---------- Loading / empty ----------
#trendly-app-root {
	.tap-loading { display: grid; place-items: center; padding: 50px; }
	.tap-empty { text-align: center; padding: 40px 20px; }
	.tap-empty__icon { font-size: 40px; }
	.tap-empty h3 { margin: 12px 0 6px; }
	.tap-empty p { color: var(--tap-ink-2); margin: 0 0 16px; }
	.tap-spinner {
		display: inline-block;
		border: 3px solid rgba(109, 94, 252, .2);
		border-top-color: var(--tap-brand);
		border-radius: 50%;
		animation: tap-spin .7s linear infinite;
	}
	a { color: var(--tap-brand-ink); }
}

// ---------- Toasts ----------
#trendly-app-root { .tap-toasts-anchor { position: relative; } }
.tap-toasts { position: fixed; right: 26px; bottom: 26px; display: flex; flex-direction: column; gap: 10px; z-index: 99999; }
.tap-toast {
	display: flex; align-items: center; gap: 10px;
	background: #1b1c30; color: #fff;
	padding: 13px 18px;
	border-radius: 12px;
	font-size: 13.5px; font-weight: 500;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
	cursor: pointer;
	animation: tap-toast-in .25s ease;
	max-width: 340px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tap-toast__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tap-toast--success .tap-toast__dot { background: #46d39a; }
.tap-toast--error .tap-toast__dot { background: #ff6b6b; }
.tap-toast--error { background: #3a1d22; }

@keyframes tap-spin { to { transform: rotate(360deg); } }
@keyframes tap-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }