/* ==========================================================================
   NoticePilot — Admin Stylesheet
   Uses nested CSS with & selectors throughout.
   ========================================================================== */


/* ---------- 2. Page Frame ---------- */
.np-wrap {
	margin: 0;
	padding: 0 20px 40px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Hero header */
.np-wrap .np-hero {
	background: linear-gradient(135deg, var(--np-brand) 0%, var(--np-brand-dark) 100%);
	border-radius: var(--np-radius-lg);
	padding: 30px 35px;
	margin: 20px 0 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	color: #fff;

	& .np-hero__info {
		display: flex;
		align-items: center;
		gap: 18px;
	}

	& .np-hero__icon {
		line-height: 1;
	}

	& .np-hero__title {
		font-size: 22px;
		font-weight: 700;
		color: #fff;
		margin: 0;
		margin-bottom: 10px;
	}

	& .np-hero__subtitle {
		font-size: 13px;
		opacity: 0.85;
		margin: 4px 0 0;
		color: #fff;
	}

	& .np-hero__actions {
		display: flex;
		gap: 10px;
	}
}

/* Statistics ribbon */
.np-wrap .np-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-bottom: 25px;
}

.np-wrap .np-stat-card {
	background: #fff;
	border: 1px solid var(--np-gray-200);
	border-radius: var(--np-radius-md);
	padding: 18px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: box-shadow var(--np-transition);

	&:hover {
		box-shadow: var(--np-shadow-sm);
	}

	& .np-stat-card__icon {
		width: 42px;
		height: 42px;
		border-radius: var(--np-radius-sm);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		flex-shrink: 0;
	}

	& .np-stat-card__value {
		font-size: 22px;
		font-weight: 700;
		color: var(--np-gray-800);
		line-height: 1.1;
	}

	& .np-stat-card__label {
		font-size: 12px;
		color: var(--np-gray-500);
		margin-top: 2px;
	}
}

/* Toolbar (above grid) */
.np-wrap .np-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;

	& .np-toolbar__title {
		font-size: 16px;
		font-weight: 600;
		color: var(--np-gray-700);
		text-transform: capitalize;
		margin: 0;
	}
}

/* ---------- 3. Button System ---------- */
.np-wrap .np-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border: 1px solid transparent;
	border-radius: var(--np-radius-sm);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--np-transition);
	text-decoration: none;
	line-height: 1.4;
	white-space: nowrap;

	&:focus-visible {
		outline: 2px solid var(--np-brand-light);
		outline-offset: 2px;
	}

	&.np-btn--primary {
		background: var(--np-brand);
		color: #fff;
		border-color: var(--np-brand);

		&:hover {
			background: var(--np-brand-dark);
			border-color: var(--np-brand-dark);
			transform: translateY(-1px);
			box-shadow: 0 4px 12px rgba(108, 92, 231, 0.35);
		}
	}

	&.np-btn--hero {
		background: rgba(255, 255, 255, 0.2);
		color: #fff;
		border-color: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(4px);

		&:hover {
			background: rgba(255, 255, 255, 0.35);
			border-color: rgba(255, 255, 255, 0.5);
			transform: translateY(-1px);
		}
	}

	&.np-btn--secondary {
		background: #fff;
		color: var(--np-gray-700);
		border-color: var(--np-gray-300);

		&:hover {
			background: var(--np-gray-50);
			border-color: var(--np-gray-400);
			transform: translateY(-1px);
		}
	}

	&.np-btn--danger {
		background: var(--np-error);
		color: #fff;
		border-color: var(--np-error);

		&:hover {
			background: #d63031;
			border-color: #d63031;
			transform: translateY(-1px);
			box-shadow: 0 4px 12px rgba(225, 112, 85, 0.35);
		}
	}

	&.np-btn--ghost {
		background: transparent;
		color: var(--np-brand);
		border-color: transparent;
		padding: 6px 12px;

		&:hover {
			background: var(--np-brand-bg);
		}
	}

	&.np-btn--sm {
		padding: 5px 12px;
		font-size: 12px;
	}

	&.np-btn--icon {
		padding: 6px;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		justify-content: center;
	}

	&:disabled,
	&[disabled] {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none !important;
		box-shadow: none !important;
	}
}

/* ---------- 4. Card Grid ---------- */
.np-wrap .np-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.np-wrap .np-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--np-gray-200);
	border-radius: var(--np-radius-md);
	padding: 0;
	box-shadow: var(--np-shadow-sm);
	transition: all var(--np-transition);
	overflow: hidden;

	&:hover {
		box-shadow: var(--np-shadow-md);
	}

	& .np-card__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 22px 14px;
	}

	& .np-card__title {
		font-size: 17px;
		font-weight: 700;
		color: var(--np-gray-800);
		margin: 0;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	& .np-card__body {
		padding: 0 22px;
	}

	& .np-card__footer {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 14px 22px 18px;
		border-top: 1px solid var(--np-gray-100);
		margin-top: 14px;
		flex-wrap: wrap;
	}
}

/* Endpoint chip */
.np-wrap .np-endpoint {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--np-brand-bg);
	color: var(--np-brand);
	font-family: 'SFMono-Regular', Consolas, monospace;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 100px;
	margin-top: 6px;
}

/* ---------- 5. Status & Badges ---------- */
.np-wrap .np-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;

	&.np-badge--enabled {
		background: var(--np-gray-50);
		color: var(--np-gray-800);
	}

	&.np-badge--disabled {
		background: var(--np-error-bg);
		color: #c0392b;
	}

	&.np-badge--scheduled {
		background: var(--np-info-bg);
		color: #2980b9;
	}

	&.np-badge--expired {
		background: var(--np-warning-bg);
		color: #b7791f;
	}
}

/* ---------- 6. Content / Campaign List ---------- */
.np-wrap .np-campaigns {
	border-top: 1px solid var(--np-gray-100);
	margin-top: 4px;
	flex: 1;

	& .np-campaigns__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14px 22px 8px;
	}

	& .np-campaigns__title {
		font-size: 13px;
		font-weight: 700;
		color: var(--np-gray-600);
		margin: 0;
		text-transform: uppercase;
		letter-spacing: 0.4px;
	}

	& .np-campaigns__list {
		padding: 0 22px 14px;
	}

	& .np-campaigns__empty {
		text-align: center;
		color: var(--np-gray-400);
		font-size: 13px;
		font-style: italic;
		padding: 16px 0;
	}
}

.np-wrap .np-campaign-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--np-gray-50);
	border: 1px solid var(--np-gray-200);
	border-radius: var(--np-radius-sm);
	padding: 12px 14px;
	margin-bottom: 8px;
	transition: all var(--np-transition);

	&:hover {
		border-color: var(--np-gray-300);
		box-shadow: var(--np-shadow-sm);
	}

	& .np-campaign-item__info {
		flex: 1;
		min-width: 0;
	}

	& .np-campaign-item__name {
		font-size: 14px;
		font-weight: 600;
		color: var(--np-gray-800);
		margin: 0 0 2px;
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}

	& .np-campaign-item__desc {
		font-size: 12px;
		color: var(--np-gray-500);
		font-style: italic;
		margin: 2px 0 0;
	}

	& .np-campaign-item__schedule {
		margin-top: 4px;
	}

	& .np-campaign-item__actions {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-shrink: 0;
	}
}

/* ---------- 7. Empty State ---------- */
.np-wrap .np-empty {
	text-align: center;
	padding: 60px 30px;
	background: #fff;
	border: 2px dashed var(--np-gray-200);
	border-radius: var(--np-radius-lg);

	& .np-empty__icon {
		font-size: 48px;
		margin-bottom: 16px;
	}

	& .np-empty__title {
		font-size: 18px;
		font-weight: 700;
		color: var(--np-gray-700);
		margin: 0 0 8px;
	}

	& .np-empty__text {
		font-size: 14px;
		color: var(--np-gray-500);
		margin: 0 0 20px;
	}
}

/* ---------- 8. Tooltip System ---------- */
[data-np-tooltip] {
	position: relative;

	&::before,
	&::after {
		position: absolute;
		z-index: 9999;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	/* Tooltip bubble */
	&::after {
		content: attr(data-np-tooltip);
		background: var(--np-gray-800);
		color: #fff;
		font-size: 12px;
		font-weight: 500;
		line-height: 1.4;
		padding: 8px 12px;
		border-radius: var(--np-radius-sm);
		max-width: 140px;
		width: max-content;
		text-transform: capitalize;
		white-space: normal;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	/* Arrow */
	&::before {
		content: '';
		border: 6px solid transparent;
	}

	/* --- Big Tooltip --- */
	&[data-tooltip-size="big"]::after {
		max-width: 500px !important;
	}

	/* --- Top (default) --- */
	&[data-tooltip-pos="top"]::after,
	&:not([data-tooltip-pos])::after {
		bottom: calc(100% + 8px);
		left: 50%;
		transform: translateX(-50%) translateY(4px);
	}

	&[data-tooltip-pos="top"]::before,
	&:not([data-tooltip-pos])::before {
		bottom: calc(100% + -4px);
		left: 50%;
		transform: translateX(-50%);
		border-top-color: var(--np-gray-800);
	}

	/* --- Bottom --- */
	&[data-tooltip-pos="bottom"]::after {
		top: calc(100% + 8px);
		left: 50%;
		transform: translateX(-50%) translateY(-4px);
	}

	&[data-tooltip-pos="bottom"]::before {
		top: calc(100% + -4px);
		left: 50%;
		transform: translateX(-50%);
		border-bottom-color: var(--np-gray-800);
	}

	/* --- Right --- */
	&[data-tooltip-pos="right"]::after {
		left: calc(100% + 8px);
		top: 50%;
		transform: translateY(-50%) translateX(-4px);
	}

	&[data-tooltip-pos="right"]::before {
		left: calc(100% + -4px);
		top: 50%;
		transform: translateY(-50%);
		border-right-color: var(--np-gray-800);
	}

	/* --- Left --- */
	&[data-tooltip-pos="left"]::after {
		right: calc(100% + 8px);
		top: 50%;
		transform: translateY(-50%) translateX(4px);
	}

	&[data-tooltip-pos="left"]::before {
		right: calc(100% + -4px);
		top: 50%;
		transform: translateY(-50%);
		border-left-color: var(--np-gray-800);
	}

	/* Show on hover */
	&:hover::before,
	&:hover::after {
		opacity: 1;
	}

	&[data-tooltip-pos="top"]:hover::after,
	&:not([data-tooltip-pos]):hover::after {
		transform: translateX(-50%) translateY(0);
	}

	&[data-tooltip-pos="bottom"]:hover::after {
		transform: translateX(-50%) translateY(0);
	}

	&[data-tooltip-pos="right"]:hover::after {
		transform: translateY(-50%) translateX(0);
	}

	&[data-tooltip-pos="left"]:hover::after {
		transform: translateY(-50%) translateX(0);
	}
}

/* ---------- 9. Notice Types ---------- */
.np-wrap .np-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	border-radius: var(--np-radius-sm);
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 14px;
	border-left: 4px solid;
	animation: np-fadeIn 0.35s ease;

	& .np-notice__icon {
		font-size: 18px;
		flex-shrink: 0;
		line-height: 1.2;
	}

	& .np-notice__text {
		flex: 1;
	}

	&.np-notice--success {
		background: var(--np-success-bg);
		border-left-color: var(--np-success);
		color: #065f46;
	}

	&.np-notice--error {
		background: var(--np-error-bg);
		border-left-color: var(--np-error);
		color: #991b1b;
	}

	&.np-notice--warning {
		background: var(--np-warning-bg);
		border-left-color: var(--np-warning);
		color: #92400e;
	}

	&.np-notice--info {
		background: var(--np-info-bg);
		border-left-color: var(--np-info);
		color: #1e40af;
	}
}

@keyframes np-fadeIn {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- 9b. Targeting Section ---------- */
.np-wrap .np-targeting-section {
	margin-top: 8px;
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius-sm);
	overflow: hidden;
}

.np-wrap .np-targeting-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 14px;
	background: var(--np-gray-100);
	border: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: var(--np-text);
	text-align: left;
	transition: background var(--np-transition);

	&:hover {
		background: var(--np-border);
	}

	& .np-targeting-toggle__arrow {
		margin-left: auto;
		transition: transform var(--np-transition);
	}

	&.np-is-open .np-targeting-toggle__arrow {
		transform: rotate(180deg);
	}
}

.np-wrap .np-targeting-body {
	padding: 8px;
	border-top: 1px solid var(--np-border);
}

.np-wrap .np-version-row {
	display: flex;
	gap: 8px;

	& .np-input--sm {
		flex: 1;
	}
}

.np-wrap .np-role-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 6px 12px;
}

.np-wrap .np-role-check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	cursor: pointer;

	& input[type="checkbox"] {
		margin: 0;
	}
}

/* Targeting badge on campaign items */
.np-wrap .np-campaign-item__targeting {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

.np-wrap .np-badge--targeting {
	background: #ede9fe;
	color: #6d28d9;
	font-size: 10px;
	padding: 2px 7px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

/* ---------- 10. Modal System (Centralized) ---------- */
.np-wrap .np-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;

	&.np-modal--open {
		opacity: 1;
		visibility: visible;

		& .np-modal__panel {
			transform: translateY(0) scale(1);
			opacity: 1;
		}
	}

	& .np-modal__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(15, 23, 42, 0.55);
		backdrop-filter: blur(4px);
	}

	/* Panel */
	& .np-modal__panel {
		position: relative;
		background: #fff;
		border-radius: var(--np-radius-lg);
		width: 90%;
		max-width: 640px;
		max-height: 85vh;
		display: flex;
		flex-direction: column;
		box-shadow: var(--np-shadow-lg);
		transform: translateY(-30px) scale(0.96);
		opacity: 0;
		transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		z-index: 1;
	}

	& .np-modal__panel--lg {
		max-width: 760px;
	}

	/* Header */
	& .np-modal__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 24px 16px;
		border-bottom: 1px solid var(--np-gray-200);
		flex-shrink: 0;
	}

	& .np-modal__title {
		font-size: 17px;
		font-weight: 700;
		color: var(--np-gray-800);
		margin: 0;
	}

	& .np-modal__close {
		background: none;
		border: none;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		color: var(--np-gray-400);
		cursor: pointer;
		transition: all var(--np-transition);

		&:hover {
			background: var(--np-gray-100);
			color: var(--np-gray-700);
		}
	}

	/* Body */
	& .np-modal__body {
		padding: 20px 24px;
		overflow-y: scroll;
		flex: 1 1 auto;
		min-height: 0;
		max-height: calc(85vh - 140px);
	}

	/* Footer */
	& .np-modal__footer {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		padding: 16px 24px;
		border-top: 1px solid var(--np-gray-200);
		background: var(--np-gray-50);
		border-radius: 0 0 var(--np-radius-lg) var(--np-radius-lg);
		flex-shrink: 0;
	}
}

/* ---------- 11. Form Components ---------- */
.np-wrap .np-field {
	margin-bottom: 18px;

	&:last-child {
		margin-bottom: 0;
	}

	& .np-field__label {
		display: block;
		font-size: 13px;
		font-weight: 600;
		color: var(--np-gray-700);
		margin-bottom: 6px;
	}

	& .np-field__required {
		color: var(--np-error);
		margin-left: 2px;
	}

	& .np-field__hint {
		font-size: 12px;
		color: var(--np-gray-400);
		margin-top: 5px;
		line-height: 1.4;
	}
}

.np-wrap .np-input,
.np-wrap .np-textarea {
	width: 100%;
	padding: 7px 14px;
	border: 1px solid var(--np-gray-300);
	border-radius: var(--np-radius-sm);
	font-size: 14px;
	color: var(--np-gray-800);
	background: #fff;
	transition: all var(--np-transition);
	box-sizing: border-box;

	&:focus {
		border-color: var(--np-brand);
		box-shadow: 0 0 0 3px var(--np-brand-bg);
		outline: none;
	}

	&::placeholder {
		color: var(--np-gray-400);
	}
}

.np-wrap select.np-input {
	padding: 0 14px;
}
.np-wrap .np-input[type="number"] {
	width: auto;
}
.np-wrap .np-textarea {
	resize: vertical;
	min-height: 120px;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 13px;
	line-height: 1.5;
}

/* Custom toggle switch */
.np-wrap .np-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 13px;
	color: var(--np-gray-700);

	& input[type="checkbox"] {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}

	& .np-toggle__slider {
		position: relative;
		width: 40px;
		height: 22px;
		background: var(--np-gray-300);
		border-radius: 100px;
		transition: all var(--np-transition);
		flex-shrink: 0;

		&::after {
			content: '';
			position: absolute;
			top: 3px;
			left: 3px;
			width: 16px;
			height: 16px;
			background: #fff;
			border-radius: 50%;
			transition: all var(--np-transition);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		}
	}

	& input[type="checkbox"]:checked+.np-toggle__slider {
		background: var(--np-brand);

		&::after {
			left: 21px;
		}
	}
}

/* Schedule fields row */
.np-wrap .np-schedule-row {
	display: flex;
	gap: 16px;

	& .np-schedule-field {
		flex: 1;
	}
}

.np-wrap .np-datetime {
	width: 100%;
	padding: 9px 14px;
	border: 1px solid var(--np-gray-300);
	border-radius: var(--np-radius-sm);
	font-size: 13px;
	color: var(--np-gray-800);
	background: #fff;
	transition: all var(--np-transition);
	box-sizing: border-box;

	&:focus {
		border-color: var(--np-brand);
		box-shadow: 0 0 0 3px var(--np-brand-bg);
		outline: none;
	}
}

/* Delete form inline wrapper */
.np-wrap .np-inline-form {
	display: inline;
	margin: 0;
}

/* ---------- 12. Docs Modal Specific ---------- */
.np-wrap .np-user-doc-step {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--np-gray-100);

	&:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	& h3 {
		font-size: 15px;
		font-weight: 700;
		color: var(--np-gray-800);
		margin: 0 0 8px;
	}

	& p {
		font-size: 13px;
		color: var(--np-gray-600);
		line-height: 1.5;
		margin: 0 0 12px;
	}
}

.np-wrap .np-code-block {
	position: relative;

	& pre {
		background: #1e1e2e;
		color: #a6e3a1;
		padding: 16px 18px;
		border-radius: var(--np-radius-sm);
		font-family: 'SFMono-Regular', Consolas, monospace;
		font-size: 12.5px;
		line-height: 1.6;
		overflow-x: auto;
		white-space: pre;
		margin: 0;
	}

	& .np-code-copy {
		position: absolute;
		top: 8px;
		right: 8px;
	}
}

.np-wrap .np-options-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-top: 8px;

	& th,
	& td {
		padding: 10px 12px;
		text-align: left;
		border: 1px solid var(--np-gray-200);
	}

	& th {
		background: var(--np-gray-50);
		font-weight: 600;
		color: var(--np-gray-700);
	}

	& td code {
		background: var(--np-gray-100);
		padding: 2px 6px;
		border-radius: 3px;
		font-size: 12px;
	}
}

/* Feature integration guides (How To Integrate → Step 3) */
.np-wrap .np-guides {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.np-wrap .np-guide {
	border: 1px solid var(--np-gray-200);
	border-radius: var(--np-radius-md, 10px);
	padding: 14px 16px;
	background: var(--np-gray-50);

	& .np-guide__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 6px;
	}

	& .np-guide__title {
		font-weight: 600;
		font-size: 13.5px;
		color: var(--np-gray-800, #1f2937);
	}

	& .np-guide__tier {
		flex: none;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: .5px;
		text-transform: uppercase;
		padding: 2px 8px;
		border-radius: 999px;
	}

	& .np-guide__tier--free {
		color: var(--np-gray-700, #374151);
		background: var(--np-gray-200, #e5e7eb);
	}

	& .np-guide__tier--pro {
		color: #fff;
		background: linear-gradient(135deg, var(--np-brand, #0284c7), var(--np-brand-dark, #0c4a6e));
	}

	& .np-guide__desc {
		margin: 0 0 10px;
		font-size: 12.5px;
		line-height: 1.55;
		color: var(--np-gray-600, #4b5563);
	}
}

/* ---------- 13. Responsive ---------- */
@media (max-width: 768px) {
	.np-grid {
		grid-template-columns: 1fr;
	}

	.np-hero {
		flex-direction: column;
		text-align: center;
		padding: 24px 20px;

		& .np-hero__info {
			flex-direction: column;
		}

		& .np-hero__actions {
			width: 100%;
			justify-content: center;
		}
	}

	.np-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.np-toolbar {
		flex-direction: column;
		gap: 12px;
		align-items: stretch;
	}

	.np-campaign-item {
		flex-direction: column;
		align-items: flex-start;

		& .np-campaign-item__actions {
			width: 100%;
			justify-content: flex-end;
		}
	}

	.np-modal {
		& .np-modal__panel {
			width: 95%;
			max-height: 90vh;
		}

		& .np-modal__footer {
			flex-direction: column;

			& .np-btn {
				width: 100%;
				justify-content: center;
			}
		}
	}

	.np-schedule-row {
		flex-direction: column;
		gap: 12px;
	}
}

/* Override WP default admin notice container */
.np-wrap .notice {
	display: none;
}

/* ── Pro A/B upsell teaser (shown in campaign modals when Pro is inactive) ── */
.np-wrap .np-pro-upsell {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	margin-top: 6px;
	background: linear-gradient(135deg, var(--np-brand-light), #fff);
	border: 1px dashed var(--np-brand);
	border-radius: 10px;
}

.np-wrap .np-pro-upsell__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	color: #fff;
	background: var(--np-brand);
	border-radius: 999px;
}

.np-wrap .np-pro-upsell__title {
	display: block;
	font-size: 13px;
	color: var(--np-brand-dark);
	margin-bottom: 2px;
}

.np-wrap .np-pro-upsell__text {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--np-gray-600, #6b7280);
	line-height: 1.5;
}

/* ── React admin app — layout helpers ── */
.np-wrap .np-field-row {
	display: flex;
	gap: 12px;
}

.np-wrap .np-field-row>* {
	flex: 1;
	min-width: 0;
}

.np-wrap .np-fieldset {
	border: 1px solid var(--np-border);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 10px 0;
}

.np-wrap .np-fieldset legend {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--np-gray-600, #6b7280);
	padding: 0 6px;
}

.np-wrap .np-template-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.np-wrap .np-role-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.np-wrap .np-addon-fields {
	margin-top: 6px;
}

.np-wrap .np-card-tools {
	display: flex;
	justify-content: flex-end;
	gap: 4px;
	margin-top: 6px;
	padding-right: 4px;
}

.np-flash {
	margin: 0 0 12px !important;
}