/**
 * Unified Admin Notice Styles — "Outline Lite" layout
 *
 * Single visual language for every notice rendered through
 * `WSSCD_Admin_Notice_Helper`. Severity is communicated by:
 *   - 3px border-left + SVG icon in the severity color
 *   - Info severity uses `--wsscd-color-primary` so it tracks the active
 *     WordPress admin color scheme (Modern → indigo, Ectoplasm → green,
 *     Sunrise → orange, etc., wired in `wordpress-color-schemes.css`).
 *   - Success / warning / error stay semantic (universal green / yellow /
 *     red) — severity recognition trumps scheme adaptation for these.
 *   - Hover shadow, body link hover, and focus rings all pick up
 *     `--wsscd-color-primary` so the scheme accent flows through.
 *
 * No tinted background, no badge labels — colors and icons carry the
 * meaning. Action buttons dock to the right edge, vertically centered
 * with the title/body.
 *
 * Built entirely from the plugin's design tokens (--wsscd-color-*,
 * --wsscd-spacing-*, --wsscd-radius-*, --wsscd-font-*, --wsscd-shadow-*)
 * so dark-mode variants and admin color schemes flow through
 * automatically.
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/admin
 * @since      2.0.6
 */

/* The wp-header-end <hr> is just a JS anchor for WordPress core's notice
   reparenting — it should never be visually present. The plugin already
   hides it per-page on the campaigns list and dashboard; declare it here
   too so notices on settings/tools/notifications/help also sit cleanly
   under the page header without an inherited browser-default <hr> gap. */
.wp-header-end {
	margin: 0;
	padding: 0;
	border: 0;
	height: 0;
	visibility: hidden;
}

/* ==========================================================================
   Base notice — white card with severity border-left, subtle shadow,
   gentle hover lift. Horizontal margins match the page-header card
   (2px left, 20px right) so the notice aligns with the header rather
   than running edge-to-edge. Top margin is 0 — the header card already
   provides 10px of bottom space, which is the right gap before a notice.
   ========================================================================== */
.wsscd-notice,
div.wsscd-notice {
	position: relative;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border);
	/* Default border-left tracks the active WP admin color scheme. The
	   severity modifiers below (success/warning/error) override it with
	   their semantic colors; info notices keep the scheme default since
	   "info" is neutral and aligns with the merchant's chosen accent. */
	border-left: 3px solid var(--wsscd-color-primary);
	border-radius: var(--wsscd-radius-lg);
	padding: var(--wsscd-padding-medium) var(--wsscd-padding-lg);
	margin: 0 20px var(--wsscd-spacing-base) 2px;
	box-shadow: 0 1px 2px var(--wsscd-shadow-sm-alpha);
	font-family: var(--wsscd-font-family);
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.wsscd-notice:hover {
	/* Subtle scheme-tinted glow on hover so the lift picks up the active
	   admin color scheme (modern/ectoplasm/sunrise/etc.) — same primary
	   token the page-header card and primary buttons use. */
	box-shadow: 0 2px 6px var(--wsscd-color-primary-alpha-15), 0 1px 2px var(--wsscd-shadow-sm-alpha);
}

.wsscd-notice__inner {
	display: flex;
	align-items: center;
	gap: var(--wsscd-gap-normal);
}

.wsscd-notice__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wsscd-spacing-xxs);
}

/* ==========================================================================
   Icon — colored SVG only, no circle backdrop. Color comes from severity.
   ========================================================================== */
.wsscd-notice__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wsscd-icon-medium);
	height: var(--wsscd-icon-medium);
	/* Default icon color tracks the active WP admin color scheme. Severity
	   modifiers (success/warning/error) override below; info uses this base. */
	color: var(--wsscd-color-primary);
}

.wsscd-notice__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
	display: block;
}

.wsscd-notice__icon .dashicons {
	font-size: var(--wsscd-icon-medium);
	width: var(--wsscd-icon-medium);
	height: var(--wsscd-icon-medium);
	color: currentColor;
}

/* Emoji icons keep a soft surface backdrop so they read cleanly without
   the SVG fill behavior. */
.wsscd-notice__icon--emoji {
	width: 30px;
	height: 30px;
	border-radius: var(--wsscd-radius-full);
	background: var(--wsscd-color-surface);
	border: 1px solid var(--wsscd-color-border-subtle);
}

.wsscd-notice__icon-emoji {
	font-size: var(--wsscd-font-size-large);
	line-height: var(--wsscd-line-height-tight);
}

/* ==========================================================================
   Title / body / list — refined hierarchy.
   ========================================================================== */
.wsscd-notice__title,
.wsscd-notice__title-line,
.wsscd-notice__body {
	margin: 0;
	font-size: var(--wsscd-font-size-base);
	line-height: var(--wsscd-line-height-base);
	color: var(--wsscd-color-text);
}

.wsscd-notice__title {
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-semibold);
	line-height: var(--wsscd-line-height-tight);
	letter-spacing: -0.005em;
}

.wsscd-notice__title-line {
	font-size: var(--wsscd-font-size-base);
}

.wsscd-notice__title-line strong {
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text);
}

.wsscd-notice__body {
	color: var(--wsscd-color-text-muted);
}

.wsscd-notice__body a {
	color: var(--wsscd-color-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--wsscd-color-text-alpha-25);
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

/* Hover picks up the active WP admin color scheme so links inside notices
   feel native to the merchant's chosen theme (modern, ectoplasm, etc.). */
.wsscd-notice__body a:hover,
.wsscd-notice__body a:focus {
	color: var(--wsscd-color-primary);
	text-decoration-color: currentColor;
}

.wsscd-notice__items {
	margin: var(--wsscd-spacing-xs) 0 0;
	padding-left: var(--wsscd-spacing-base);
	list-style: disc;
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-color-text-muted);
}

.wsscd-notice__items li {
	margin: var(--wsscd-spacing-xxs) 0;
}

.wsscd-notice__items li::marker {
	color: currentColor;
	opacity: 0.5;
}

.wsscd-notice__items a {
	color: var(--wsscd-color-text);
	text-decoration: none;
	font-weight: var(--wsscd-font-weight-medium);
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.wsscd-notice__items a:hover,
.wsscd-notice__items a:focus {
	border-bottom-color: currentColor;
}

/* ==========================================================================
   Meta chips — refined pills with stable backgrounds and subtle borders.
   ========================================================================== */
.wsscd-notice__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wsscd-spacing-xs);
	align-items: center;
	margin-top: var(--wsscd-spacing-xs);
}

.wsscd-notice__chip {
	display: inline-flex;
	align-items: center;
	padding: var(--wsscd-spacing-xxs) var(--wsscd-spacing-sm-large);
	border-radius: var(--wsscd-radius-pill);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-medium);
	background: var(--wsscd-color-surface);
	color: var(--wsscd-color-text-muted);
	border: 1px solid var(--wsscd-color-border-subtle);
	white-space: nowrap;
}

.wsscd-notice__chip--info {
	background: var(--wsscd-color-info-alpha-15);
	color: var(--wsscd-color-info-dark);
	border-color: var(--wsscd-color-info-alpha-25);
}

.wsscd-notice__chip--success {
	background: var(--wsscd-color-success-alpha-15);
	color: var(--wsscd-color-success-dark);
	border-color: var(--wsscd-color-success-alpha-25);
}

.wsscd-notice__chip--warning {
	background: var(--wsscd-color-warning-alpha-15);
	color: var(--wsscd-color-warning-dark);
	border-color: var(--wsscd-color-warning-alpha-25);
}

.wsscd-notice__chip--error {
	background: var(--wsscd-color-danger-alpha-15);
	color: var(--wsscd-color-danger-dark);
	border-color: var(--wsscd-color-danger-alpha-25);
}

/* ==========================================================================
   Actions — docked to the right edge, vertically centered with content.
   ========================================================================== */
.wsscd-notice__actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--wsscd-gap-tight);
	margin-left: auto;
}

/* Notice-internal action buttons are slightly tighter than full-page
   buttons so they feel proportional inside a one-line notice. */
.wsscd-notice__actions .wsscd-button {
	min-height: 28px;
	padding: var(--wsscd-spacing-xs) var(--wsscd-spacing-md);
	font-size: var(--wsscd-font-size-base);
	border-radius: var(--wsscd-radius-md);
}

/* A URL-backed action renders as `<a class="wsscd-button">`, which WordPress
   core then styles via `div.notice a` (its own link color + underline). That
   leaks onto the button — underlined, link-blue text instead of the variant's
   own color. Re-assert the button system's variant-driven color and drop the
   underline at a specificity that clears core's `div.notice a` (0,1,2) and
   `div.notice a:hover` (0,2,2). Scoped to `a.wsscd-button` so real <button>s
   and disabled states stay untouched; uses the same `--wsscd-button-*` vars,
   so every variant (primary / secondary / danger) stays correct. */
.wsscd-notice__actions a.wsscd-button {
	color: var(--wsscd-button-color);
	text-decoration: none;
}

.wsscd-notice__actions a.wsscd-button:hover,
.wsscd-notice__actions a.wsscd-button:active {
	color: var(--wsscd-button-hover-color);
}

.wsscd-notice__action-link {
	background: transparent;
	border: 0;
	padding: var(--wsscd-spacing-xs) var(--wsscd-spacing-xxs);
	color: var(--wsscd-color-text-muted);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--wsscd-color-text-alpha-25);
	font-size: var(--wsscd-font-size-base);
	font-family: inherit;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.wsscd-notice__action-link:hover,
.wsscd-notice__action-link:focus {
	color: var(--wsscd-color-text);
	text-decoration-color: currentColor;
}

/* Visible focus ring for keyboard users on every actionable element
   inside a notice. Default uses the active WP admin color scheme's
   primary token so info notices and the dismiss button match the
   merchant's chosen theme (modern/ectoplasm/sunrise/etc.). Severity-
   specific overrides below keep success/warning/error focus rings
   semantic. */
.wsscd-notice__actions a:focus-visible,
.wsscd-notice__actions button:focus-visible,
.wsscd-notice__action-link:focus-visible {
	outline: 2px solid var(--wsscd-color-primary);
	outline-offset: 2px;
	border-radius: var(--wsscd-radius-sm);
}

/* ==========================================================================
   Severity tones.
   Info is the default — its border-left and icon color come from the
   base rules (`--wsscd-color-primary`), which adapt to the active WP
   admin color scheme. Success / warning / error override below with
   their semantic universal conventions (green / yellow / red).
   ========================================================================== */

.wsscd-notice--success,
div.wsscd-notice--success {
	border-left-color: var(--wsscd-alert-success-border);
}
.wsscd-notice--success .wsscd-notice__icon {
	color: var(--wsscd-color-success);
}

.wsscd-notice--warning,
div.wsscd-notice--warning {
	border-left-color: var(--wsscd-alert-warning-border);
}
.wsscd-notice--warning .wsscd-notice__icon {
	color: var(--wsscd-color-warning);
}

.wsscd-notice--error,
div.wsscd-notice--error {
	border-left-color: var(--wsscd-alert-danger-border);
}
.wsscd-notice--error .wsscd-notice__icon {
	color: var(--wsscd-color-danger);
}

/* Severity-aware focus rings — a focused button inside an error notice
   shouldn't outline in info-blue. */
.wsscd-notice--success .wsscd-notice__actions a:focus-visible,
.wsscd-notice--success .wsscd-notice__actions button:focus-visible {
	outline-color: var(--wsscd-color-success);
}
.wsscd-notice--warning .wsscd-notice__actions a:focus-visible,
.wsscd-notice--warning .wsscd-notice__actions button:focus-visible {
	outline-color: var(--wsscd-color-warning);
}
.wsscd-notice--error .wsscd-notice__actions a:focus-visible,
.wsscd-notice--error .wsscd-notice__actions button:focus-visible {
	outline-color: var(--wsscd-color-danger);
}

/* ==========================================================================
   Dismissible — give WP's X button a softer hover, position aligned
   with the new card padding.
   ========================================================================== */
.wsscd-notice.is-dismissible {
	padding-right: calc(var(--wsscd-padding-lg) + var(--wsscd-spacing-xl));
}

.wsscd-notice.is-dismissible .notice-dismiss {
	top: var(--wsscd-spacing-sm-large);
	right: var(--wsscd-spacing-sm);
	border-radius: var(--wsscd-radius-full);
	width: 26px;
	height: 26px;
	transition: background-color 0.15s ease;
}

.wsscd-notice.is-dismissible .notice-dismiss::before {
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-large);
	width: var(--wsscd-font-size-large);
	height: var(--wsscd-font-size-large);
	line-height: 1.6;
	transition: color 0.15s ease;
}

.wsscd-notice.is-dismissible .notice-dismiss:hover,
.wsscd-notice.is-dismissible .notice-dismiss:focus {
	background: var(--wsscd-color-surface);
}

.wsscd-notice.is-dismissible .notice-dismiss:hover::before,
.wsscd-notice.is-dismissible .notice-dismiss:focus::before {
	color: var(--wsscd-color-text);
}

/* ==========================================================================
   Inline variant — used for page-embedded banners (e.g. draft-resume on
   the campaigns list). Renders inside content sections that already
   provide their own horizontal padding, so we drop the page-margin
   alignment but bump the bottom margin to --wsscd-spacing-lg (20px) so
   it matches the inter-section rhythm the rest of the campaigns list
   already uses (--wsscd-spacing-lg / --wsscd-spacing-xl). Without this
   the next section sits flush against the notice.
   ========================================================================== */
.wsscd-notice--inline {
	margin: 0 0 var(--wsscd-spacing-lg);
}

/* ==========================================================================
   Responsive — wrap actions below content on narrow viewports so long
   titles or item lists don't squeeze the right column.
   ========================================================================== */
@media (max-width: 700px) {
	.wsscd-notice {
		padding: var(--wsscd-padding-medium) var(--wsscd-padding-base);
	}

	.wsscd-notice__inner {
		flex-wrap: wrap;
		gap: var(--wsscd-gap-normal);
	}

	.wsscd-notice__actions {
		width: 100%;
		margin-left: 0;
		margin-top: var(--wsscd-spacing-xs);
		padding-left: var(--wsscd-spacing-xxl);
	}

	.wsscd-notice__actions .wsscd-button {
		flex: 1;
		min-width: 120px;
		justify-content: center;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.wsscd-notice {
		animation: none;
		transition: none;
	}
}

@media (prefers-contrast: more) {
	.wsscd-notice {
		border-width: 2px;
		border-left-width: 4px;
	}
}