/**
 * Briefify — wp-admin dashboard styles.
 * Scoped under .briefify-admin-wrap so it never leaks into the rest of wp-admin.
 */

.briefify-admin-wrap {
	--briefify-bg-1: #0a1628;
	--briefify-bg-2: #10243b;
	--briefify-surface: rgba(13, 26, 43, 0.72);
	--briefify-surface-2: rgba(19, 38, 62, 0.8);
	--briefify-line: rgba(101, 150, 214, 0.22);
	--briefify-text-0: #f4f8ff;
	--briefify-text-1: #b3c3d7;
	--briefify-accent: #2bd4bf;
	--briefify-accent-2: #4f7cff;
	--briefify-success: #5dcaa5;
	--briefify-error: #ff6b6b;

	max-width: 960px;
	margin-top: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Systematic keyboard-focus outline: every custom interactive element in
   this admin UI (buttons, links, tabs, form fields) gets the same visible,
   brand-colored ring on keyboard focus — :focus-visible so it only shows for
   keyboard/AT users, not on every mouse click. Applied once, here, rather
   than per-component, so nothing new added later is silently missing it. */
.briefify-admin-wrap a:focus-visible,
.briefify-admin-wrap button:focus-visible,
.briefify-admin-wrap input:focus-visible,
.briefify-admin-wrap select:focus-visible,
.briefify-admin-wrap textarea:focus-visible,
.briefify-admin-wrap [tabindex]:focus-visible {
	outline: 2px solid var( --briefify-accent );
	outline-offset: 2px;
}

/* Every panel below sets an opaque background-color under its translucent
   gradient/blur. Without it, the gradient's alpha blends with whatever sits
   behind the element in the page — on the *default* (light) admin color
   scheme that measurably drags text contrast below WCAG AA (verified:
   --briefify-text-1 on the gradient's lighter stop measured 4.15:1, under
   the 4.5:1 minimum for normal text). The opaque base guarantees the
   contrast the palette was designed for regardless of what's behind it. */
.briefify-admin-header {
	background-color: #0d1a2b;
	background-image: linear-gradient( 160deg, var( --briefify-bg-1 ), var( --briefify-bg-2 ) );
	border: 1px solid var( --briefify-line );
	border-radius: 14px;
	padding: 18px 24px;
	margin-bottom: 14px;
	color: var( --briefify-text-0 );
}

.briefify-admin-header h1 {
	margin: 0 0 4px;
	color: var( --briefify-text-0 );
	font-size: 20px;
}

.briefify-admin-header p {
	margin: 0;
	color: var( --briefify-text-1 );
	font-size: 13px;
}

.briefify-admin-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap: 12px;
	margin-bottom: 14px;
}

.briefify-admin-card {
	background-color: #0d1a2b;
	background-image: linear-gradient( 160deg, var( --briefify-surface ), var( --briefify-surface-2 ) );
	backdrop-filter: blur( 12px );
	border: 1px solid var( --briefify-line );
	border-radius: 14px;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.briefify-admin-card:hover {
	transform: translateY( -3px );
	border-color: rgba( 43, 212, 191, 0.4 );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.28 );
}

.briefify-admin-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba( 43, 212, 191, 0.12 );
	color: var( --briefify-accent );
	margin-bottom: 4px;
}

.briefify-admin-card-value {
	font-size: 26px;
	font-weight: 700;
	color: var( --briefify-accent );
}

.briefify-admin-card-label {
	font-size: 12px;
	color: var( --briefify-text-1 );
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.briefify-admin-panel {
	background-color: #0d1a2b;
	background-image: linear-gradient( 160deg, var( --briefify-surface ), var( --briefify-surface-2 ) );
	backdrop-filter: blur( 12px );
	border: 1px solid var( --briefify-line );
	border-radius: 14px;
	padding: 18px 22px;
	margin-bottom: 14px;
	color: var( --briefify-text-0 );
}

/* Panels inside a two-up row: stretch to match the taller sibling (rather
   than leaving one panel visibly shorter), then lay out their own content
   as a flex column so a natural "footer" block (a hint, a link) is pushed
   toward the bottom instead of leaving a blank gap after a short body. A
   panel with no footer block just keeps its content flush at the top —
   harmless, and no longer visually asymmetric since both panels share the
   same height and card styling either way. */
.briefify-admin-row .briefify-admin-panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.briefify-admin-panel h2 {
	margin: 0 0 10px;
	color: var( --briefify-text-0 );
	font-size: 15px;
}

.briefify-admin-panel p {
	margin: 0 0 10px;
}

.briefify-admin-panel .description,
.briefify-admin-panel label {
	color: var( --briefify-text-1 );
}

.briefify-admin-panel .form-table th {
	color: var( --briefify-text-0 );
}

.briefify-admin-panel .form-table tr {
	border-bottom: 1px solid rgba( 255, 255, 255, 0.05 );
}

.briefify-admin-panel input.regular-text,
.briefify-admin-panel select {
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid var( --briefify-line );
	color: var( --briefify-text-0 );
	border-radius: 8px;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* The template <select>'s open dropdown (and each <option> row's hover/
   highlight state) is drawn by the browser as a native popup, outside this
   element's own box — `color`/`background` here don't reach it. Chrome and
   Safari both default that popup to a light UI, so its hover highlight uses
   light-mode's near-black text, which lands on this dark field's own
   inherited dark background and becomes nearly unreadable. `color-scheme`
   is the standard way to tell the browser which native palette to draw
   that popup (and its hover state) in, so it stays legible instead of
   defaulting to light. Scoped to select only — the panel's one checkbox
   (Notifications) is unstyled and should keep the ordinary wp-admin look. */
.briefify-admin-panel select {
	color-scheme: dark;
}

/* Belt-and-braces for the subset of engines that *do* honor per-option
   styling (recent Chrome) instead of relying on color-scheme alone. */
.briefify-admin-panel select option {
	background: var( --briefify-bg-2 );
	color: var( --briefify-text-0 );
}

/* wp-admin core ships `.wp-core-ui select:hover` / `:focus` rules that set
   color: #1e1e1e (specificity 0,2,1) — higher than our own unqualified
   `.briefify-admin-panel select` (0,1,1), so without reasserting color here
   core wins on hover/focus and the field's own text goes near-black against
   this dark background, even though our base (non-hover/focus) rule already
   beats core's base rule on source order. Confirmed by inspecting the
   matched core rule directly, not assumed. Selects only — inputs aren't
   targeted by any such core :hover/:focus color rule, verified the same
   way, so this is a no-op reassertion for them rather than a fix. */
.briefify-admin-panel input.regular-text:hover,
.briefify-admin-panel select:hover {
	border-color: rgba( 43, 212, 191, 0.55 );
	color: var( --briefify-text-0 );
}

.briefify-admin-panel input.regular-text:focus,
.briefify-admin-panel select:focus {
	border-color: var( --briefify-accent );
	background: rgba( 43, 212, 191, 0.06 );
	box-shadow: 0 0 0 2px rgba( 43, 212, 191, 0.15 );
	outline: none;
	color: var( --briefify-text-0 );
}

/* WP core .button on a dark glass panel needs its own hover/focus treatment —
   the stock light-gray hover state is nearly invisible against this background. */
.briefify-admin-panel .button {
	background: rgba( 255, 255, 255, 0.06 );
	border-color: var( --briefify-line );
	color: var( --briefify-text-0 );
	box-shadow: none;
	text-shadow: none;
}

.briefify-admin-panel .button:hover,
.briefify-admin-panel .button:focus {
	background: rgba( 43, 212, 191, 0.14 );
	border-color: var( --briefify-accent );
	color: var( --briefify-accent );
}

.briefify-admin-panel .button-primary {
	background: linear-gradient( 90deg, var( --briefify-accent ), var( --briefify-accent-2 ) );
	border-color: transparent;
	color: #04111f;
	text-shadow: none;
	font-weight: 600;
}

.briefify-admin-panel .button-primary:hover,
.briefify-admin-panel .button-primary:focus {
	box-shadow: 0 6px 16px rgba( 43, 212, 191, 0.35 );
	color: #04111f;
}

.briefify-admin-test-result {
	font-size: 12px;
	color: var( --briefify-accent );
}

.briefify-admin-test-result--error {
	color: var( --briefify-error );
}

/* A <button>, not a bare <code> — keyboard focusable and operable with
   Enter/Space by default, unlike the plain element it replaced. */
.briefify-admin-shortcode {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba( 43, 212, 191, 0.1 );
	border: 1px solid rgba( 43, 212, 191, 0.3 );
	color: var( --briefify-accent );
	border-radius: 8px;
	padding: 8px 14px;
	font-family: "SF Mono", "Fira Code", Consolas, monospace;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.briefify-admin-shortcode:hover {
	background: rgba( 43, 212, 191, 0.2 );
	border-color: rgba( 43, 212, 191, 0.55 );
}

.briefify-admin-shortcode.is-copied {
	color: var( --briefify-success );
	border-color: rgba( 93, 202, 165, 0.5 );
	background: rgba( 93, 202, 165, 0.12 );
}

.briefify-admin-hint {
	color: var( --briefify-text-1 );
	font-size: 12px;
	margin-top: 8px;
}

/* Two-column row (shortcode generator + template preview, or recent
   submissions + getting started): stretch both panels to equal height —
   see the flex-column + space-between rule above for how each panel's own
   content stays anchored without leaving a raw empty gap. */
.briefify-admin-row {
	display: flex;
	align-items: stretch;
	gap: 14px;
	margin-bottom: 14px;
}

.briefify-admin-row .briefify-admin-panel {
	margin-bottom: 0;
}

.briefify-admin-panel--shortcode {
	flex: 0 0 280px;
}

.briefify-admin-panel--preview {
	flex: 1;
	min-width: 0;
}

.briefify-admin-panel--recent,
.briefify-admin-panel--checklist {
	flex: 1;
	min-width: 0;
}

@media ( max-width: 782px ) {
	.briefify-admin-row {
		flex-direction: column;
	}

	.briefify-admin-panel--shortcode {
		flex: 1;
	}
}

/* Recent submissions list */
.briefify-admin-recent-list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.briefify-admin-recent-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

.briefify-admin-recent-item a:hover {
	background: rgba( 43, 212, 191, 0.08 );
	transform: translateX( 2px );
}

.briefify-admin-recent-name {
	color: var( --briefify-text-0 );
	font-weight: 600;
	font-size: 13px;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.briefify-admin-recent-template {
	flex-shrink: 0;
	font-size: 11px;
	padding: 2px 9px;
	border-radius: 20px;
	background: rgba( 79, 124, 255, 0.14 );
	color: #7ea0ff;
}

.briefify-admin-recent-date {
	flex-shrink: 0;
	font-size: 11px;
	color: var( --briefify-text-1 );
}

/* Getting started checklist */
.briefify-admin-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.briefify-admin-checklist li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var( --briefify-text-1 );
}

.briefify-admin-checklist li.is-done {
	color: var( --briefify-text-0 );
}

.briefify-checklist-dot {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var( --briefify-line );
	font-size: 11px;
	line-height: 1;
	color: transparent;
	transition: all 0.15s ease;
}

.briefify-admin-checklist li.is-done .briefify-checklist-dot {
	background: rgba( 43, 212, 191, 0.18 );
	border-color: var( --briefify-accent );
	color: var( --briefify-accent );
}

/* Template preview tabs */
.briefify-admin-preview-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.briefify-admin-preview-tab {
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid var( --briefify-line );
	background: rgba( 255, 255, 255, 0.04 );
	color: var( --briefify-text-1 );
	font-size: 12px;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.15s ease;
}

.briefify-admin-preview-tab:hover {
	border-color: rgba( 43, 212, 191, 0.55 );
	color: var( --briefify-accent );
}

.briefify-admin-preview-tab.is-active {
	border-color: var( --briefify-accent );
	background: rgba( 43, 212, 191, 0.14 );
	color: var( --briefify-accent );
	font-weight: 600;
}

.briefify-admin-preview-instance.briefify-wrap {
	display: none;
	max-width: none;
	margin: 0;
}

.briefify-admin-preview-instance.briefify-wrap.is-active {
	display: block;
}

.briefify-admin-preview-title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --briefify-text-1 );
	margin: 0 0 10px;
}

.briefify-admin-preview-grid.briefify-type-grid {
	grid-template-columns: 1fr;
	gap: 8px;
	margin-bottom: 0;
}

.briefify-admin-preview-card.briefify-type-card {
	padding: 12px 14px;
	cursor: default;
	gap: 6px;
}

.briefify-admin-preview-card.briefify-type-card:hover {
	transform: none;
}

.briefify-admin-preview-card .briefify-type-icon svg {
	width: 18px;
	height: 18px;
}

/* Submission status badges (CPT list table) */
.briefify-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: rgba( 79, 124, 255, 0.12 );
	color: #4f7cff;
}

.briefify-status--new {
	background: rgba( 43, 212, 191, 0.12 );
	color: #1a9c8c;
}

.briefify-brief-table th {
	text-align: left;
	vertical-align: top;
	padding: 8px 12px;
}

.briefify-brief-table td {
	padding: 8px 12px;
}
