/* ============================================================
   ADMIN — NoisyPixel.com
   Admin panel UI classes.
   All theme-aware values use var(--backend-*) tokens.
   ============================================================ */

/* ===== Page Layout ===== */
.admin-page {
	padding: 2rem;
	max-width: 72rem;
}

.admin-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.admin-page-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--backend-text);
	margin: 0 0 0.25rem;
}

.admin-page-desc {
	color: var(--backend-text-muted);
	font-size: 0.875rem;
	margin: 0;
}

/* ===== Action Buttons ===== */
/* Add / create action button */
.admin-btn-add {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	background: var(--np-magenta);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background 0.15s,
		transform 0.1s;
	flex-shrink: 0;
}
.admin-btn-add:hover {
	background: var(--np-orange);
	transform: translateY(-1px);
}

/* ===== Empty State ===== */
.admin-empty-state {
	text-align: center;
	padding: 4rem 2rem;
	color: var(--backend-text-muted);
}

.admin-empty-icon {
	display: flex;
	justify-content: center;
	color: var(--backend-border);
	margin-bottom: 1rem;
}

.admin-empty-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--backend-text-muted);
	margin: 0 0 0.25rem;
}

.admin-empty-hint {
	font-size: 0.8125rem;
	color: var(--backend-text-muted);
	margin: 0;
	opacity: 0.7;
}

/* ===== Table ===== */
.admin-table-wrap {
	background: var(--backend-surface);
	border: 1px solid var(--backend-border);
	border-radius: 12px;
	overflow: hidden;
}

.admin-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.admin-table-wrap th {
	text-align: left;
	padding: 0.6875rem 1.25rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--backend-text-muted);
	border-bottom: 1px solid var(--backend-border);
}

.admin-table-wrap td {
	padding: 0.9375rem 1.25rem;
	border-bottom: 1px solid var(--backend-border);
}

.admin-table-wrap tr:last-child td {
	border-bottom: none;
}

/* ===== Table Cell Variants ===== */
.admin-cell-name {
	color: var(--backend-text);
	font-weight: 500;
}

.admin-cell-slug {
	color: var(--backend-text-muted);
	font-size: 0.75rem;
	font-family: monospace;
	margin-top: 0.2rem;
}

.admin-cell-muted {
	color: var(--backend-text-muted);
	font-size: 0.8125rem;
}

.admin-cell-mono {
	color: var(--backend-text-muted);
	font-size: 0.75rem;
	font-family: monospace;
}

/* ===== Row Actions ===== */
.admin-row-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem;
}

.admin-btn-edit {
	padding: 0.375rem 0.75rem;
	border-radius: 7px;
	font-size: 0.75rem;
	color: var(--backend-text-muted);
	text-decoration: none;
	transition:
		color 0.15s,
		background 0.15s;
}
.admin-btn-edit:hover {
	color: var(--backend-text);
	background: var(--backend-hover);
}

.admin-btn-delete {
	padding: 0.375rem 0.75rem;
	border-radius: 7px;
	font-size: 0.75rem;
	color: rgba(239, 68, 68, 0.5);
	background: none;
	border: none;
	cursor: pointer;
	transition:
		color 0.15s,
		background 0.15s;
}
.admin-btn-delete:hover {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.08);
}

/* ===== Filter Tabs ===== */
.admin-filter-tabs {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 1rem;
	background: var(--backend-surface);
	border: 1px solid var(--backend-border);
	border-radius: 8px;
	padding: 0.25rem;
	width: fit-content;
}

.admin-filter-tab {
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	font-size: 0.75rem;
	background: none;
	transition:
		color 0.15s,
		background 0.15s;
	color: var(--backend-text-muted);
	text-transform: capitalize;
}
.admin-filter-tab.active {
	background: var(--backend-hover);
	color: var(--backend-text);
}
.admin-filter-tab:not(.active):hover {
	color: var(--backend-text);
}

/* ===== Admin Badges ===== */
.admin-badge-popular {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.125rem 0.4375rem;
	border-radius: 4px;
	background: rgba(255, 46, 151, 0.12);
	color: var(--np-magenta);
	font-family: monospace;
}

.admin-badge-system {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	background: var(--backend-hover);
	color: var(--backend-text-muted);
	font-family: monospace;
}

/* ===== Permission Tags ===== */
.admin-perm-tag {
	display: inline-block;
	font-size: 0.6875rem;
	padding: 0.1875rem 0.5rem;
	background: rgba(255, 46, 151, 0.08);
	color: var(--np-magenta);
	border-radius: 9999px;
	margin: 0.125rem;
}

.admin-access-tag {
	display: inline-block;
	font-size: 0.6875rem;
	padding: 0.1875rem 0.5rem;
	background: rgba(0, 136, 255, 0.08);
	color: var(--np-cyan);
	border-radius: 9999px;
	margin: 0.125rem;
}

/* ===== Role Cards ===== */
.admin-role-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-radius: 10px;
	background: var(--backend-surface);
	border: 1px solid var(--backend-border);
	margin-bottom: 0.5rem;
}

.admin-role-card-body {
	flex: 1;
	min-width: 0;
}

.admin-role-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--backend-text);
	margin: 0 0 0.25rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.admin-role-desc {
	font-size: 0.8125rem;
	color: var(--backend-text-muted);
	margin: 0 0 0.5rem;
}

.admin-role-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}

/* ===== Section Label ===== */
.admin-section-label {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--backend-text-muted);
	font-family: monospace;
	margin-bottom: 0.75rem;
	margin-top: 0;
}

/* ===== Inline Status Select ===== */
.admin-status-select {
	background: transparent;
	font-size: 0.8125rem;
	border: none;
	outline: none;
	cursor: pointer;
	color: var(--backend-text-muted);
	padding: 0;
}

/* ===== User Role Badges ===== */
.admin-user-role-badge {
	display: inline-block;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 0.1875rem 0.5rem;
	border-radius: 9999px;
	font-family: monospace;
}

.admin-user-role-admin {
	background: rgba(255, 46, 151, 0.1);
	color: var(--np-magenta);
}

.admin-user-role-client {
	background: rgba(0, 136, 255, 0.1);
	color: var(--np-cyan);
}

.admin-user-role-select {
	background: var(--backend-input-bg);
	border: 1.5px solid var(--backend-input-border);
	color: var(--backend-text);
	font-size: 0.8125rem;
	border-radius: 7px;
	padding: 0.3125rem 0.625rem;
	min-width: 9rem;
	transition: border-color 0.15s;
}
.admin-user-role-select:focus {
	border-color: var(--np-cyan);
	outline: none;
}

/* ===== Form Actions ===== */
.admin-btn-save-sm {
	padding: 0.375rem 0.75rem;
	border-radius: 7px;
	border: none;
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: 600;
	background: var(--backend-hover);
	color: var(--backend-text-muted);
	transition:
		color 0.15s,
		background 0.15s;
}
.admin-btn-save-sm:not(:disabled):hover {
	color: var(--backend-text);
	background: var(--backend-border);
}
.admin-btn-save-sm:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.admin-field-error {
	font-size: 0.75rem;
	color: #ef4444;
	margin-top: 0.25rem;
}

/* ===== View As Button ===== */
.admin-view-as-btn {
	font-size: 0.75rem;
	color: var(--backend-text-muted);
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.15s;
}
.admin-view-as-btn:hover {
	color: var(--backend-text);
}

/* ===== Hint Text ===== */
.admin-hint {
	font-size: 0.75rem;
	color: var(--backend-text-muted);
	margin-top: 1rem;
	font-family: monospace;
}
.admin-hint code {
	background: var(--backend-hover);
	padding: 0.125rem 0.375rem;
	border-radius: 4px;
}

/* ===== Breadcrumb ===== */
.admin-breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0;
}

.admin-bc-link {
	color: var(--backend-text-muted);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color 0.15s;
}
.admin-bc-link:hover {
	color: var(--backend-text);
}

.admin-bc-sep {
	color: var(--backend-text-muted);
	font-size: 0.875rem;
}

/* ===== Empty Table Cell ===== */
.admin-empty-cell {
	padding: 2rem 1.25rem;
	text-align: center;
	color: var(--backend-text-muted);
	font-size: 0.875rem;
}

/* ===== Alert / Error Banner ===== */
.admin-alert-error {
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: 8px;
	color: #ef4444;
	font-size: 0.875rem;
}

/* ===== Backend Surface Utilities ===== */
/* Use instead of hardcoded colors in admin + portal components */

.be-surface {
	background: var(--backend-surface);
	color: var(--backend-text);
}

.be-sidebar {
	background: var(--backend-sidebar);
}

.be-text {
	color: var(--backend-text);
}

.be-text-muted {
	color: var(--backend-text-muted);
}

.be-border {
	border-color: var(--backend-border);
}

/* ===== Backend Form Fields ===== */
/* Theme-aware input fields for admin + portal */
.be-form-field {
	width: 100%;
	border-radius: var(--radius-btn);
	padding: 10px 16px;
	font-weight: 500;
	font-size: 0.9375rem;
	font-family: inherit;
	background: var(--backend-input-bg);
	color: var(--backend-text);
	border: 1.5px solid var(--backend-input-border);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}
.be-form-field:focus {
	outline: none;
	border-color: var(--np-cyan);
	box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.15);
}
.be-form-field.error {
	border-color: #ef4444;
}
.be-form-field::placeholder {
	color: var(--backend-text-muted);
	opacity: 0.7;
}

/* Label above backend form field */
.be-form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--backend-text);
	margin-bottom: 6px;
}

/* ===== Backend Card ===== */
/* Surface card used in admin and portal pages */
.be-card {
	background: var(--backend-surface);
	border: 1px solid var(--backend-border);
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 1.25rem;
}

/* ===== Backend Input / Select / Textarea ===== */
/* Compact themed input — use in place of be-form-field for inline or dense layouts */
.be-input {
	background: var(--backend-input-bg);
	color: var(--backend-text);
	border: 1.5px solid var(--backend-input-border);
	border-radius: 7px;
	padding: 0.4375rem 0.75rem;
	font-size: 0.875rem;
	font-family: inherit;
	width: 100%;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}
.be-input:focus {
	outline: none;
	border-color: var(--np-cyan);
	box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.12);
}
.be-input::placeholder {
	color: var(--backend-text-muted);
	opacity: 0.7;
}

/* Textarea height helper — combine with be-input */
.be-textarea {
	resize: vertical;
	min-height: 100px;
}

/* ===== Backend Form Group ===== */
/* Label + input wrapper with consistent bottom spacing */
.be-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-bottom: 1rem;
}

/* ===== Backend Label ===== */
/* Short form label used inside be-form-group */
.be-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--backend-text);
}

/* ===== Backend Section Title ===== */
/* h2 heading inside a be-card */
.be-section-title {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--backend-text);
	margin: 0 0 1rem;
}

/* ===== Backend Tabs ===== */
/* Segmented pill tab bar for switching between content views */
.be-tabs {
	display: flex;
	gap: 0.125rem;
	margin-bottom: 1rem;
	background: var(--backend-surface);
	border: 1px solid var(--backend-border);
	border-radius: 9px;
	padding: 0.25rem;
	width: fit-content;
}

/* Individual tab button */
.be-tab {
	padding: 0.375rem 0.875rem;
	border-radius: 7px;
	border: none;
	background: none;
	font-size: 0.84375rem;
	font-weight: 500;
	color: var(--backend-text-muted);
	cursor: pointer;
	transition:
		color 0.15s,
		background 0.15s;
	white-space: nowrap;
}
.be-tab:hover {
	color: var(--backend-text);
	background: var(--backend-hover);
}

/* Active tab state */
.be-tab-active {
	background: var(--backend-hover);
	color: var(--backend-text);
	font-weight: 600;
}

/* ===== Backend Alert Banners ===== */
/* Base alert — always combine with a variant modifier class */
.be-alert {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: 0.875rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
}

/* Success variant */
.be-alert-success {
	background: rgba(34, 197, 94, 0.08);
	border-color: rgba(34, 197, 94, 0.25);
	color: #16a34a;
}

/* Error variant */
.be-alert-error {
	background: rgba(239, 68, 68, 0.08);
	border-color: rgba(239, 68, 68, 0.2);
	color: #ef4444;
}

/* ===== Backend Empty State (inside be-card) ===== */
/* Centered empty message rendered inside a be-card */
.be-empty-state {
	text-align: center;
	padding: 3rem 2rem;
	color: var(--backend-text-muted);
	font-size: 0.875rem;
}

/* ===== Standalone Admin Table ===== */
/* Full-width borderless table — used inside be-card instead of admin-table-wrap */
.admin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.admin-table th {
	text-align: left;
	padding: 0.6875rem 1.25rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--backend-text-muted);
	border-bottom: 1px solid var(--backend-border);
}
.admin-table td {
	padding: 0.9375rem 1.25rem;
	border-bottom: 1px solid var(--backend-border);
	color: var(--backend-text-muted);
}
.admin-table tbody tr:last-child td {
	border-bottom: none;
}

/* Clickable table row — navigates to a detail page on click */
.admin-table-row-link {
	cursor: pointer;
	transition: background 0.12s;
}
.admin-table-row-link:hover {
	background: var(--backend-hover);
}
.admin-table-row-link:focus-visible {
	outline: 2px solid var(--np-cyan);
	outline-offset: -2px;
}

/* ===== Generic Admin Badge ===== */
/* Small pill label — combine with prospect-status-* or other modifiers for color */
.admin-badge {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: capitalize;
	padding: 0.1875rem 0.5625rem;
	border-radius: 9999px;
	background: var(--backend-hover);
	color: var(--backend-text-muted);
	white-space: nowrap;
}

/* ===== Prospect Status Badges ===== */

/* Status badge: new prospect */
.prospect-status-new {
	background: var(--np-cyan);
	color: white;
}

/* Status badge: contacted */
.prospect-status-contacted {
	background: var(--np-purple);
	color: white;
}

/* Status badge: qualified */
.prospect-status-qualified {
	background: var(--np-yellow);
	color: var(--np-charcoal);
}

/* Status badge: proposal sent */
.prospect-status-proposal {
	background: var(--np-orange);
	color: white;
}

/* Status badge: closed won */
.prospect-status-closed_won {
	background: #22c55e;
	color: white;
}

/* Status badge: closed lost */
.prospect-status-closed_lost {
	background: var(--np-gray);
	color: white;
}

/* Status badge: nurture/long-term follow-up */
.prospect-status-nurture {
	background: var(--np-navy-mid);
	color: var(--np-bright-cyan);
}