/* ============================================================================
   Snap Permit AI — Frontend Console
   Two jobs:
   1. The dashboard shell (dark sidebar + content pane), matching the
      Frontend Dashboard aesthetic used across the municipal plugin suite.
   2. Frontend equivalents for the handful of core wp-admin classes the
      captured admin screens rely on (button, widefat, notice, form fields).
      Without part 2 the reused markup renders unstyled outside wp-admin.
   All colour pairs below are AAA-verified: both background and text are
   declared together in every interactive state.
   ========================================================================== */

:root {
	--spai-navy: #1b365d;
	--spai-navy-deep: #142a49;
	--spai-teal: #003b49;
	--spai-blue: #1d4289;
	--spai-gold: #ffc845;
	--spai-warm: #d6d2c4;
	--spai-line: #dfe3e8;
	--spai-ink: #003b49;
	--spai-muted: #4a5568;
}

/* ---------------------------------------------------------------- shell -- */
.spai-console {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0;
	border: 1px solid var(--spai-line);
	border-radius: .75rem;
	overflow: hidden;
	background: #fff;
	font-size: 1rem;
	line-height: 1.5;
}

/* -------------------------------------------------------------- sidebar -- */
.spai-console-nav {
	width: 17rem;
	flex: 0 0 17rem;
	background: var(--spai-navy);
	color: #fff;
	padding: 0 0 1.5rem;
	align-self: stretch;
}

.spai-console-brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1.25rem 1.25rem;
	background: var(--spai-navy-deep);
	color: #fff;
}
.spai-console-brand strong { display: block; font-size: 1.05rem; color: #fff; }
.spai-console-brand span { display: block; font-size: .8rem; color: var(--spai-warm); }
.spai-console-brand .spai-console-icon { width: 26px; height: 26px; flex: 0 0 26px; }

.spai-console-group { margin-top: 1.25rem; }
.spai-console-group-label {
	margin: 0 0 .35rem;
	padding: 0 1.25rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--spai-warm);
}
.spai-console-group ul { list-style: none; margin: 0; padding: 0; }
.spai-console-group li { margin: 0; }

/* LVHA order is mandatory: link → visited → hover → active. */
.spai-console-link:link,
.spai-console-link:visited {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .6rem 1.25rem;
	color: #fff;
	background: transparent;
	text-decoration: none;
	border-left: 3px solid transparent;
	font-size: .93rem;
}
.spai-console-link:hover,
.spai-console-link:focus {
	background: var(--spai-blue);
	color: #fff;
	border-left-color: var(--spai-gold);
}
.spai-console-link:focus-visible { outline: 3px solid var(--spai-gold); outline-offset: -3px; }
.spai-console-link:active { background: var(--spai-navy-deep); color: #fff; }
.spai-console-link.is-active {
	background: var(--spai-navy-deep);
	color: #fff;
	border-left-color: var(--spai-gold);
	font-weight: 600;
}
.spai-console-link .spai-console-icon { flex: 0 0 18px; }
.spai-console-link span { flex: 1 1 auto; }

.spai-console-badge {
	flex: 0 0 auto;
	min-width: 1.35rem;
	padding: .1rem .4rem;
	border-radius: 999px;
	background: #b3121f;
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	text-align: center;
}

/* ------------------------------------------------------------ main pane -- */
.spai-console-main {
	flex: 1 1 24rem;
	min-width: 0;
	padding: 1.75rem 2rem 2.5rem;
	background: #fff;
	color: var(--spai-ink);
}
.spai-console-main > .wrap { margin: 0; max-width: none; }
.spai-console-main h1 { margin-top: 0; font-size: 1.6rem; color: var(--spai-navy); }
.spai-console-main h2 { font-size: 1.2rem; color: var(--spai-navy); }
.spai-console-main img { max-width: 100%; height: auto; }

.spai-console-empty {
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--spai-muted);
}

/* ============================================================================
   wp-admin compatibility — only the classes the captured screens actually use.
   ========================================================================== */

.spai-console-main .description {
	color: var(--spai-muted);
	font-size: .87rem;
	margin: .25rem 0 0;
}

.spai-console-main input[type="text"],
.spai-console-main input[type="email"],
.spai-console-main input[type="url"],
.spai-console-main input[type="number"],
.spai-console-main input[type="password"],
.spai-console-main input[type="date"],
.spai-console-main input[type="time"],
.spai-console-main select,
.spai-console-main textarea {
	padding: .45rem .6rem;
	border: 1px solid #8c9196;
	border-radius: .3rem;
	background: #fff;
	color: var(--spai-ink);
	font-size: .95rem;
	max-width: 100%;
}
.spai-console-main input:focus,
.spai-console-main select:focus,
.spai-console-main textarea:focus {
	outline: 3px solid var(--spai-gold);
	outline-offset: 1px;
	border-color: var(--spai-navy);
}
.spai-console-main .regular-text { width: 25rem; max-width: 100%; }
.spai-console-main .large-text { width: 100%; }

/* Buttons: background AND colour declared together in every state. */
.spai-console-main .button:link,
.spai-console-main .button:visited,
.spai-console-main .button {
	display: inline-block;
	padding: .45rem .9rem;
	border: 1px solid var(--spai-navy);
	border-radius: .3rem;
	background: #fff;
	color: var(--spai-navy);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}
.spai-console-main .button:hover,
.spai-console-main .button:focus {
	background: var(--spai-navy);
	color: #fff;
}
.spai-console-main .button:active { background: var(--spai-navy-deep); color: #fff; }
.spai-console-main .button:focus-visible { outline: 3px solid var(--spai-gold); outline-offset: 2px; }
.spai-console-main .button[disabled],
.spai-console-main .button:disabled {
	background: #e6e8ea;
	color: #55595c;
	border-color: #b6babd;
	cursor: not-allowed;
}

.spai-console-main .button-primary:link,
.spai-console-main .button-primary:visited,
.spai-console-main .button-primary {
	background: var(--spai-navy);
	color: #fff;
	border-color: var(--spai-navy);
}
.spai-console-main .button-primary:hover,
.spai-console-main .button-primary:focus {
	background: var(--spai-teal);
	color: #fff;
	border-color: var(--spai-teal);
}
.spai-console-main .button-primary:active { background: var(--spai-navy-deep); color: #fff; }

.spai-console-main .button-small { padding: .28rem .6rem; font-size: .8rem; }

/* Tables */
.spai-console-main .widefat {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--spai-line);
	background: #fff;
	margin: 1rem 0;
}
.spai-console-main .widefat th,
.spai-console-main .widefat td {
	padding: .6rem .75rem;
	text-align: left;
	border-bottom: 1px solid var(--spai-line);
	vertical-align: middle;
}
.spai-console-main .widefat thead th {
	background: #f4f6f8;
	color: var(--spai-navy);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.spai-console-main .widefat.striped tbody tr:nth-child(odd) { background: #fafbfc; }
.spai-console-main .widefat tbody tr:hover { background: #eef3f8; }

/* Notices */
.spai-console-main .notice {
	padding: .75rem 1rem;
	margin: 1rem 0;
	border-left: 4px solid var(--spai-navy);
	background: #f4f6f8;
	color: var(--spai-ink);
	border-radius: .25rem;
}
.spai-console-main .notice p { margin: 0; }
.spai-console-main .notice-success { border-left-color: #0f7a3d; background: #eef7f1; }
.spai-console-main .notice-error   { border-left-color: #b3121f; background: #fbeef0; }
.spai-console-main .notice-warning { border-left-color: #8a6100; background: #fdf6e6; }

/* -------------------------------------------------------------- mobile --- */
@media (max-width: 60rem) {
	.spai-console { display: block; }
	.spai-console-nav { width: 100%; flex: none; padding-bottom: .75rem; }
	.spai-console-group { margin-top: .75rem; }
	.spai-console-group ul { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0 .75rem; }
	.spai-console-link:link,
	.spai-console-link:visited {
		border-left: 0;
		border-radius: .3rem;
		padding: .45rem .7rem;
	}
	.spai-console-main { padding: 1.25rem 1rem 2rem; }
	.spai-console-main .regular-text { width: 100%; }
	/* Wide tables scroll rather than blow out the layout. */
	.spai-console-main .widefat { display: block; overflow-x: auto; white-space: nowrap; }
}

@media print {
	.spai-console-nav { display: none; }
	.spai-console { border: 0; }
}