/**
 * Extension detail – PX Adminer animated hero (html/com_content/article/ext-hero/px-adminer.php, js/px-ext-adminer.js).
 * The PX Adminer screen drawn in HTML: tables + rows in a window, an SQL card and an Export card floating on the right.
 * Everything is scoped under .pxdb; colours use the site design tokens with fallbacks.
 */
.tp-ext-detail .txd-hero .visual.pxt { background: none; padding: 0; border-radius: 0; display: block; overflow: visible; }

.pxdb {
	--pxdb-navy: var(--tp-navy, #050038);
	--pxdb-green: var(--ds-green, #22c55e);
	--pxdb-ink: var(--ds-green-ink, #0f6b31);
	--pxdb-soft: var(--ds-green-soft, #e6f8ec);
	--pxdb-line: #eef1f5;
	--pxdb-mute: #8a93a6;
	--pxdb-text: #3b4256;
	position: relative; padding: 8px 0 30px; font-size: 12px; line-height: 1.35; color: var(--pxdb-navy);
	font-family: Inter, "SF Pro Text", system-ui, -apple-system, sans-serif; text-align: left;
}
.pxdb *, .pxdb *::before, .pxdb *::after { box-sizing: border-box; }

/* window */
.pxdb-win { position: relative; width: 100%; background: #fff; border-radius: 16px; overflow: hidden;
	box-shadow: 0 0 0 1px rgba(5,0,56,.07), 0 10px 26px rgba(5,0,56,.10); display: grid; grid-template-columns: 30% 1fr; grid-template-rows: auto 1fr; }
.pxdb-bar { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--pxdb-line); }
.pxdb-name { font-weight: 800; font-size: 14px; white-space: nowrap; }
.pxdb-name small { font-weight: 600; font-size: 11px; color: var(--pxdb-mute); margin-left: 3px; }
.pxdb-crumb { margin-left: auto; color: var(--pxdb-mute); font-size: 11px; white-space: nowrap; }
.pxdb-crumb b { color: var(--pxdb-navy); }
.pxdb-side { background: #f7f9fb; border-right: 1px solid var(--pxdb-line); padding: 12px 8px 16px; display: flex; flex-direction: column; gap: 2px; }
.pxdb-h { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pxdb-mute); margin: 0 0 6px 6px; }
.pxdb-h b { width: 7px; height: 7px; border-radius: 2px; background: var(--pxdb-green); }
.pxdb-t { display: flex; align-items: center; gap: 7px; height: 25px; padding: 0 6px; border-radius: 7px; font-weight: 600; color: var(--pxdb-text); }
.pxdb-t i { width: 11px; height: 10px; border-radius: 3px; border: 1.5px solid #b9c1cf; flex: none; }
.pxdb-t em { margin-left: auto; font-style: normal; font-size: 10px; color: #a0a8b8; }
.pxdb-t.is-on { background: var(--pxdb-soft); color: var(--pxdb-ink); }
.pxdb-t.is-on i { border-color: var(--pxdb-green); background: rgba(34,197,94,.2); }
.pxdb-main { position: relative; padding: 12px 14px 82px; min-width: 0; }
.pxdb-tools { display: flex; gap: 6px; margin-bottom: 10px; }
.pxdb-search, .pxdb-chip { height: 26px; display: flex; align-items: center; padding: 0 10px; border: 1px solid #e3e7ee; border-radius: 7px; font-weight: 600; color: var(--pxdb-text); white-space: nowrap; }
.pxdb-search { flex: 1; color: #a0a8b8; font-weight: 500; overflow: hidden; }
.pxdb-grid { border: 1px solid var(--pxdb-line); border-radius: 10px; overflow: hidden; }
.pxdb-row { display: grid; grid-template-columns: 28px 1fr 78px; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-top: 1px solid #f1f3f7; color: var(--pxdb-text); transition: background .25s, box-shadow .25s; }
.pxdb-row.pxdb-head { border-top: 0; background: #f7f9fb; height: 28px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pxdb-mute); }
.pxdb-id { color: var(--pxdb-mute); font-weight: 600; }
.pxdb-ti { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pxdb-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxdb-save { display: none; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--pxdb-green); color: #fff; font-weight: 700; font-size: 10.5px; white-space: nowrap; transition: transform .15s; }
.pxdb-st { justify-self: start; padding: 2px 7px; border-radius: 99px; background: var(--pxdb-soft); color: var(--pxdb-ink); font-weight: 700; font-size: 9.5px; transition: background .3s, color .3s; }
.pxdb-st.is-off { background: #f1f3f7; color: #6b7385; }

/* editing a row */
.pxdb-row.is-edit { background: #f3fcf6; box-shadow: inset 0 0 0 1.5px var(--pxdb-green); }
.pxdb-row.is-edit .pxdb-val { flex: 1; padding: 3px 7px; border: 1.5px solid var(--pxdb-green); border-radius: 6px; background: #fff; color: var(--pxdb-navy); font-weight: 600; }
.pxdb-row.is-edit .pxdb-val::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--pxdb-navy); animation: pxdb-blink 1s steps(1) infinite; }
.pxdb-row.is-edit .pxdb-save { display: inline-flex; }
.pxdb-row.is-edit .pxdb-st { visibility: hidden; }
.pxdb-save.is-press, .pxdb-go.is-press { transform: scale(.92); }
.pxdb-row.is-flash { background: var(--pxdb-soft); }

.pxdb-toast { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -6px); display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; background: var(--pxdb-navy); color: #fff; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.pxdb-toast i { color: var(--pxdb-green); }
.pxdb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* cards */
.pxdb-cards { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: start; margin: -64px 18px 0 18px; }
.pxdb-card { background: #fff; border-radius: 14px; padding: 13px 14px 14px; box-shadow: 0 0 0 1px rgba(5,0,56,.06), 0 10px 24px rgba(5,0,56,.13); }
.pxdb-code { margin: 0; min-height: 66px; padding: 10px 12px; border: 0; border-radius: 9px; background: #0b0b2e; color: #d6dbff; font: 600 11.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow: hidden; }
.pxdb-code .k { color: #7ee39a; }
.pxdb-code .n { color: #ffd479; }
.pxdb-code.is-typing::after { content: ""; display: inline-block; width: .55em; height: 1.05em; vertical-align: -2px; background: #d6dbff; animation: pxdb-blink 1s steps(1) infinite; }
.pxdb-run { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.pxdb-res { font-weight: 600; color: var(--pxdb-ink); transition: opacity .25s; }
.pxdb-go { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 7px; background: var(--pxdb-navy); color: #fff; font-weight: 700; transition: transform .15s; }
.pxdb-go i { color: var(--pxdb-green); font-size: 9px; }
.pxdb-opt { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 9px; border-radius: 8px; font-weight: 700; color: var(--pxdb-text); transition: background .25s, color .25s; }
.pxdb-opt + .pxdb-opt { margin-top: 3px; }
.pxdb-opt i { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid #b9c1cf; transition: .25s; }
.pxdb-opt em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 600; color: var(--pxdb-mute); }
.pxdb-opt.is-on { background: var(--pxdb-soft); color: var(--pxdb-ink); }
.pxdb-opt.is-on i { border-color: var(--pxdb-green); background: var(--pxdb-green); box-shadow: inset 0 0 0 2px #fff; }
.pxdb-done { margin-top: 10px; transition: opacity .25s; }
.pxdb-prog { height: 5px; border-radius: 9px; background: #eef1f5; overflow: hidden; }
.pxdb-prog span { display: block; height: 100%; width: 100%; background: var(--pxdb-green); border-radius: 9px; transition: width 1s ease-out; }
.pxdb-file { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; color: var(--pxdb-ink); font-size: 11px; }

.pxdb .is-hidden { opacity: 0; }

.pxdb-rp { all: unset; position: absolute; right: 2px; bottom: 6px; cursor: pointer; color: var(--pxdb-mute); font-size: 12px; padding: 4px; }
.pxdb-rp:hover, .pxdb-rp:focus-visible { color: var(--pxdb-ink); }

@keyframes pxdb-blink { 50% { opacity: 0; } }

/* narrow column: cards under the window, side by side */
@media (max-width: 640px) {
	.pxdb { font-size: 11px; }
	.pxdb-cards { grid-template-columns: 1fr; margin: 10px 0 0; }
	.pxdb-main { padding-bottom: 16px; }
	.pxdb-crumb { display: none; }
	.pxdb-t em { display: none; }
	.pxdb-win { grid-template-columns: 28% 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.pxdb *, .pxdb *::after { animation: none !important; transition: none !important; }
}