/**
 * Innova Sales Report — shared admin and front-end styles.
 *
 * Everything is scoped under .innova-sr / .innova-sr-portal so nothing leaks
 * into wp-admin or the active theme. Logical properties (inline-start/end) are
 * used throughout so the layout mirrors correctly in RTL without a second
 * stylesheet.
 *
 * @package Innova_Sales_Report
 */

.innova-sr,
.innova-sr-portal {
	--innova-navy: #182c4b;
	--innova-navy-2: #22395f;
	--innova-navy-soft: #eef1f6;
	--innova-teal: #288c82;
	--innova-teal-soft: #e3f3f1;
	--innova-orange: #f0852f;
	--innova-orange-soft: #fdebdd;
	--innova-danger: #d64545;
	--innova-danger-soft: #fbeaea;
	--innova-surface: #fff;
	--innova-border: #e0e4ec;
	--innova-text: #1b2430;
	--innova-muted: #6b7688;
	--innova-radius: 12px;
	--innova-shadow: 0 2px 12px rgba( 24, 44, 75, 0.06 );

	color: var( --innova-text );
	font-size: 14px;
	line-height: 1.6;
}

.innova-sr *,
.innova-sr-portal * {
	box-sizing: border-box;
}

/*
 * The plugin hides conditional fields, inactive type panels and the "Other"
 * text box with the HTML hidden attribute. The user-agent rule behind that
 * attribute is only `display: none`, which any author rule setting display —
 * such as .innova-input below — silently beats. Restating it here means
 * hidden always wins, whatever else a rule or a theme sets.
 */
.innova-sr [hidden],
.innova-sr-portal [hidden] {
	display: none !important;
}

/*
 * wp-admin ships this class, themes do not always. Declaring it here keeps the
 * radio inputs behind the type cards and chips reachable by keyboard and
 * screen readers on the front end too.
 */
.innova-sr .screen-reader-text,
.innova-sr-portal .screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ------------------------------------------------------------------ cards */

.innova-card {
	background: var( --innova-surface );
	border: 1px solid var( --innova-border );
	border-radius: var( --innova-radius );
	box-shadow: var( --innova-shadow );
	margin: 0 0 18px;
	padding: 20px 22px;
}

.innova-section-head {
	align-items: center;
	border-bottom: 2px solid var( --innova-navy-soft );
	color: var( --innova-navy );
	display: flex;
	font-size: 15px;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0 0 12px;
}

.innova-step {
	align-items: center;
	background: var( --innova-navy );
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 700;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.innova-lede {
	color: var( --innova-muted );
	font-size: 13px;
	margin: 0 0 14px;
}

.innova-muted {
	color: var( --innova-muted );
	font-size: 12px;
}

/* -------------------------------------------------------------- notices */

.innova-notice {
	border-inline-start: 4px solid var( --innova-navy );
	border-radius: 8px;
	font-size: 13px;
	margin: 0 0 16px;
	padding: 12px 16px;
}

.innova-notice-error {
	background: var( --innova-danger-soft );
	border-inline-start-color: var( --innova-danger );
	color: #8f2a2a;
	font-weight: 600;
}

.innova-notice-info {
	background: var( --innova-navy-soft );
	color: var( --innova-navy-2 );
}

/* --------------------------------------------------------- type selector */

.innova-type-grid {
	border: 0;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat( auto-fit, minmax( 108px, 1fr ) );
	margin: 0;
	padding: 0;
}

.innova-type-card {
	background: var( --innova-surface );
	border: 1.5px solid var( --innova-border );
	border-radius: 12px;
	cursor: pointer;
	display: block;
	padding: 20px 8px 16px;
	position: relative;
	text-align: center;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.innova-type-card:hover {
	border-color: #c2ccdb;
	box-shadow: 0 4px 12px rgba( 24, 44, 75, 0.08 );
	transform: translateY( -1px );
}

.innova-type-card:focus-within {
	border-color: var( --innova-teal );
	box-shadow: 0 0 0 3px rgba( 40, 140, 130, 0.2 );
	outline: none;
}

.innova-type-card.is-active {
	background: var( --innova-navy );
	border-color: var( --innova-navy );
	box-shadow: 0 4px 14px rgba( 24, 44, 75, 0.22 );
}

.innova-type-card.is-active .innova-type-label {
	color: #fff;
}

/*
 * A tick in the corner of the selected card. The radio is visually hidden for
 * layout reasons, so the fill is otherwise the only "chosen" cue — and a dark
 * card reads as hover to plenty of people.
 *
 * This is a real SVG rather than a rotated CSS border: the border trick draws
 * two edges of a box and relies on the rotation landing exactly right, which it
 * does not once logical properties flip the sides in RTL. It rendered as a
 * slash there.
 */
.innova-type-check {
	align-items: center;
	background: #fff;
	border-radius: 50%;
	color: var( --innova-navy );
	display: flex;
	height: 18px;
	inset-block-start: 7px;
	inset-inline-end: 7px;
	justify-content: center;
	opacity: 0;
	position: absolute;
	transform: scale( 0.6 );
	transition: opacity 0.15s ease, transform 0.15s ease;
	width: 18px;
}

.innova-type-check .innova-icon {
	height: 11px;
	stroke-width: 3.5;
	width: 11px;
}

.innova-type-card.is-active .innova-type-check {
	opacity: 1;
	transform: scale( 1 );
}

/* ------------------------------------------------------------------ icons */

.innova-icon {
	display: block;
	flex-shrink: 0;
	height: 20px;
	width: 20px;
}

.innova-icon-badge {
	height: 13px;
	width: 13px;
}

.innova-step .innova-icon {
	height: 15px;
	width: 15px;
}

.innova-badge-icon {
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
}

.innova-type-cell {
	align-items: center;
	display: flex;
	gap: 8px;
}

/*
 * Each type gets the accent it already carries on its archive badge, so the
 * selector and the list teach the same colour language. Chip + label is also a
 * denser card than a bare glyph floating over text.
 */
.innova-type-icon {
	align-items: center;
	background: var( --innova-navy-soft );
	border-radius: 11px;
	color: var( --innova-navy-2 );
	display: flex;
	height: 38px;
	justify-content: center;
	margin: 0 auto 9px;
	transition: background 0.15s, color 0.15s;
	width: 38px;
}

.innova-type-icon .innova-icon {
	height: 20px;
	width: 20px;
}

.innova-type-card.is-teal .innova-type-icon {
	background: var( --innova-teal-soft );
	color: var( --innova-teal );
}

.innova-type-card.is-orange .innova-type-icon {
	background: var( --innova-orange-soft );
	color: #b6631f;
}

/* On the filled card the chip goes translucent so the icon stays legible. */
.innova-type-card.is-active .innova-type-icon {
	background: var(--innova-teal);
	color: #fff;
}

.innova-type-label {
	color: var( --innova-text );
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
}

/* ------------------------------------------------------------------ form */

/* Two equal columns spanning the full width of the card. */
.innova-grid {
	display: grid;
	gap: 18px 20px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	width: 100%;
}

.innova-field.is-full {
	grid-column: 1 / -1;
}

.innova-label {
	align-items: baseline;
	color: var( --innova-navy-2 );
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	font-weight: 700;
	gap: 5px;
	letter-spacing: 0.005em;
	margin: 0 0 7px;
	padding: 0;
}

.innova-required {
	color: var( --innova-danger );
	font-size: 14px;
	line-height: 1;
}

.innova-unit {
	color: var( --innova-muted );
	font-size: 11.5px;
	font-weight: 500;
}

.innova-sr .innova-input,
.innova-sr-portal .innova-input {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fbfcfe;
	border: 1.5px solid var( --innova-border );
	border-radius: 9px;
	color: var( --innova-text );
	display: block;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	max-width: 100%;
	min-height: 42px;
	padding: 10px 13px;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.innova-sr .innova-input:hover:not( :focus ):not( :disabled ),
.innova-sr-portal .innova-input:hover:not( :focus ):not( :disabled ) {
	border-color: #c8d0de;
}

.innova-sr .innova-input:focus,
.innova-sr-portal .innova-input:focus {
	background-color: #fff;
	border-color: var( --innova-teal );
	box-shadow: 0 0 0 3px rgba( 40, 140, 130, 0.14 );
	outline: none;
}

.innova-sr .innova-input:disabled,
.innova-sr-portal .innova-input:disabled {
	background-color: #f2f4f8;
	color: var( --innova-muted );
	cursor: not-allowed;
}

.innova-sr .innova-input::placeholder,
.innova-sr-portal .innova-input::placeholder {
	color: #9aa4b4;
	opacity: 1;
}

/* Invalid only after the browser has something to complain about. */
.innova-sr .innova-input:not( :placeholder-shown ):invalid,
.innova-sr-portal .innova-input:not( :placeholder-shown ):invalid {
	border-color: var( --innova-danger );
}

.innova-sr textarea.innova-input,
.innova-sr-portal textarea.innova-input {
	line-height: 1.65;
	min-height: 92px;
	padding: 11px 13px;
	resize: vertical;
}

/*
 * Date and time fields render their value left-aligned because the control is
 * laid out LTR internally. In an RTL form that leaves the value stranded away
 * from the label, so it is aligned to the opposite edge there — and only there.
 */
[dir="rtl"] .innova-sr input.innova-input[type="date"],
[dir="rtl"] .innova-sr input.innova-input[type="time"],
[dir="rtl"] .innova-sr-portal input.innova-input[type="date"],
[dir="rtl"] .innova-sr-portal input.innova-input[type="time"],
.rtl .innova-sr input.innova-input[type="date"],
.rtl .innova-sr input.innova-input[type="time"],
.rtl .innova-sr-portal input.innova-input[type="date"],
.rtl .innova-sr-portal input.innova-input[type="time"] {
	text-align: end;
}

.innova-sr input.innova-input[type="date"]::-webkit-calendar-picker-indicator,
.innova-sr input.innova-input[type="time"]::-webkit-calendar-picker-indicator,
.innova-sr-portal input.innova-input[type="date"]::-webkit-calendar-picker-indicator,
.innova-sr-portal input.innova-input[type="time"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s;
}

.innova-sr input.innova-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.innova-sr input.innova-input[type="time"]:hover::-webkit-calendar-picker-indicator,
.innova-sr-portal input.innova-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.innova-sr-portal input.innova-input[type="time"]:hover::-webkit-calendar-picker-indicator {
	opacity: 1;
}

/*
 * Native select arrows sit hard against the border and ignore the field's
 * padding. Suppressing the native control and drawing the chevron as a
 * background image lets it respect the same inline padding as the text, and
 * mirrors correctly in RTL.
 */
.innova-sr select.innova-input,
.innova-sr-portal select.innova-input,
.innova-sr .innova-select,
.innova-sr-portal .innova-select {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-position: right 13px center;
	background-repeat: no-repeat;
	background-size: 15px 15px;
	cursor: pointer;
	padding-inline-end: 38px;
}

.innova-sr select.innova-input:hover,
.innova-sr-portal select.innova-input:hover {
	background-color: #fff;
}

[dir="rtl"] .innova-sr select.innova-input,
[dir="rtl"] .innova-sr-portal select.innova-input,
.rtl .innova-sr select.innova-input,
.rtl .innova-sr-portal select.innova-input {
	background-position: left 13px center;
}

.innova-other-input {
	margin-top: 9px;
}

/* ----------------------------------------------------------------- chips */

.innova-chip-group {
	border: 0;
	margin: 0;
	padding: 0;
}

.innova-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.innova-chip {
	background: #fbfcfe;
	border: 1.5px solid var( --innova-border );
	border-radius: 100px;
	color: var( --innova-muted );
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	min-height: 36px;
	padding: 8px 15px;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	user-select: none;
}

.innova-chip:hover {
	background: #fff;
	border-color: var( --innova-teal );
	color: var( --innova-navy-2 );
}

.innova-chip:focus-within {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --innova-teal );
}

.innova-chip.is-selected {
	background: var( --innova-navy );
	border-color: var( --innova-navy );
	color: #fff;
}

/* --------------------------------------------------------------- buttons */

.innova-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.innova-actions-compact {
	margin-top: 12px;
}

/*
 * Buttons carry an icon plus a label, so they are flex rows. These rules are
 * scoped tightly enough to win over wp-admin's .button without !important.
 */
.innova-sr .innova-btn,
.innova-sr-portal .innova-btn {
	align-items: center;
	background: #fff;
	border: 1.5px solid var( --innova-border );
	border-radius: 9px;
	box-shadow: none;
	color: var( --innova-text );
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	gap: 8px;
	height: auto;
	justify-content: center;
	line-height: 1.4;
	min-height: 42px;
	padding: 10px 18px;
	text-decoration: none;
	text-shadow: none;
	transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
	white-space: nowrap;
}

/*
 * Pill buttons on the front end only. Declared after the shared rule so it wins
 * on equal specificity for buttons inside the portal — wp-admin keeps the 9px
 * radius that matches the rest of the admin chrome.
 */
.innova-sr-portal .innova-btn {
	border-radius: 100px;
}

.innova-sr .innova-btn:hover,
.innova-sr-portal .innova-btn:hover {
	background: #fbfcfe;
	border-color: var( --innova-navy );
	color: var( --innova-navy );
}

.innova-sr .innova-btn:focus-visible,
.innova-sr-portal .innova-btn:focus-visible {
	outline: 2px solid var( --innova-teal );
	outline-offset: 2px;
}

.innova-sr .innova-btn:disabled,
.innova-sr-portal .innova-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.innova-icon-btn {
	height: 16px;
	width: 16px;
}

.innova-sr .innova-btn-primary,
.innova-sr-portal .innova-btn-primary {
	background: var( --innova-navy );
	border-color: var( --innova-navy );
	box-shadow: 0 2px 8px rgba( 24, 44, 75, 0.18 );
	color: #fff;
	padding-inline: 22px;
}

.innova-sr .innova-btn-primary:hover,
.innova-sr-portal .innova-btn-primary:hover {
	background: var( --innova-navy-2 );
	border-color: var( --innova-navy-2 );
	box-shadow: 0 4px 12px rgba( 24, 44, 75, 0.24 );
	color: #fff;
}

.innova-sr .innova-btn-small,
.innova-sr-portal .innova-btn-small {
	font-size: 12px;
	gap: 6px;
	min-height: 32px;
	padding: 5px 12px;
}

.innova-sr .innova-btn-danger,
.innova-sr-portal .innova-btn-danger {
	background: var( --innova-danger-soft );
	border-color: transparent;
	color: var( --innova-danger );
}

.innova-sr .innova-btn-danger:hover,
.innova-sr-portal .innova-btn-danger:hover {
	background: #f7dcdc;
	border-color: transparent;
	color: #b23434;
}

.innova-sr .innova-btn-quiet,
.innova-sr-portal .innova-btn-quiet {
	background: transparent;
	border-color: transparent;
	color: var( --innova-muted );
}

.innova-sr .innova-btn-quiet:hover,
.innova-sr-portal .innova-btn-quiet:hover {
	background: var( --innova-navy-soft );
	border-color: transparent;
	color: var( --innova-navy );
}

/* ------------------------------------------------------------- save card */

.innova-save-card {
	position: sticky;
	bottom: 16px;
}

.innova-save-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}

.innova-save-hint {
	color: var( --innova-muted );
	flex: 1 1 260px;
	font-size: 12.5px;
	margin: 0;
	max-width: 52ch;
}

.innova-save-actions {
	flex: 0 0 auto;
	justify-content: flex-end;
}

/* --------------------------------------------------------------- filters */

.innova-filters {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	margin: 0 0 16px;
}

.innova-filter {
	margin: 0;
}

.innova-period-form {
	align-items: flex-end;
	display: flex;
	gap: 10px;
	margin: 0 0 18px;
}

.innova-inline-form {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

/* --------------------------------------------------------------- summary */

/*
 * Stat tiles read left-to-right — icon, then label, then figure — instead of
 * centring a bare number in a wide slab. The label sits above the value so the
 * eye lands on what the number means before the number itself.
 */
.innova-summary {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	margin: 0 0 16px;
}

.innova-stat {
	align-items: center;
	background: var( --innova-surface );
	border: 1px solid var( --innova-border );
	border-radius: 14px;
	box-shadow: var( --innova-shadow );
	display: flex;
	gap: 15px;
	overflow: hidden;
	padding: 17px 19px;
	position: relative;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

/* A colour rail keeps the two tiles distinguishable at a glance. */
.innova-stat::before {
	background: var( --innova-navy );
	content: "";
	inset-block: 0;
	inset-inline-start: 0;
	position: absolute;
	width: 4px;
}

.innova-stat.is-accent::before {
	background: var( --innova-teal );
}

.innova-stat:hover {
	border-color: #cfd6e2;
	box-shadow: 0 6px 18px rgba( 24, 44, 75, 0.1 );
	transform: translateY( -1px );
}

.innova-stat-icon {
	align-items: center;
	background: var( --innova-navy-soft );
	border-radius: 12px;
	color: var( --innova-navy-2 );
	display: flex;
	flex-shrink: 0;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.innova-stat-icon .innova-icon {
	height: 21px;
	width: 21px;
}

.innova-stat.is-accent .innova-stat-icon {
	background: var( --innova-teal-soft );
	color: var( --innova-teal );
}

.innova-stat-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.innova-stat-label {
	color: var( --innova-muted );
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
	text-transform: uppercase;
}

.innova-stat-value {
	color: var( --innova-navy );
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-top: 2px;
	/* Long totals must wrap rather than push the tile wider. */
	overflow-wrap: anywhere;
	/* Digits stay column-aligned as the figure updates. */
	font-variant-numeric: tabular-nums;
}

.innova-stat.is-accent .innova-stat-value {
	color: var( --innova-teal );
}

/*
 * Docked to the bottom of the viewport. Exporting is what you do after reading
 * the list, so the control should still be there at the end of a long scroll
 * rather than only at the top. Grouping the four buttons under their own
 * legends also makes clear they are two pairs — combined vs per client.
 */
.innova-export-bar {
	align-items: center;
	backdrop-filter: blur( 8px );
	background: rgba( 255, 255, 255, 0.95 );
	border: 1px solid var( --innova-border );
	border-radius: 12px;
	bottom: 12px;
	box-shadow: 0 -2px 16px rgba( 24, 44, 75, 0.1 );
	column-gap: 16px;
	display: flex;
	flex-wrap: wrap;
	margin-top: 16px;
	padding: 8px 14px;
	position: sticky;
	row-gap: 8px;
	z-index: 20;
}

.innova-export-intro {
	color: var( --innova-navy-2 );
	font-size: 12px;
	font-weight: 700;
	margin: 0;
	margin-inline-end: auto;
}

.innova-export-groups {
	column-gap: 16px;
	display: flex;
	flex-wrap: wrap;
	row-gap: 8px;
}

/* Inline legend beside its buttons; a hairline separates the two groups, which
   costs far less height than two bordered boxes stacked in a grid. */
.innova-export-group {
	align-items: center;
	display: flex;
	gap: 8px;
}

.innova-export-group + .innova-export-group {
	border-inline-start: 1px solid var( --innova-border );
	padding-inline-start: 16px;
}

.innova-export-legend {
	color: var( --innova-muted );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.innova-export-group .innova-actions {
	gap: 6px;
}

.innova-sr .innova-export-group .innova-btn,
.innova-sr-portal .innova-export-group .innova-btn {
	font-size: 12px;
	gap: 5px;
	min-height: 30px;
	padding: 4px 11px;
}

.innova-export-group .innova-icon-btn {
	height: 14px;
	width: 14px;
}

/* Static on short viewports so it never eats the screen. */
@media screen and ( max-height: 640px ) {

	.innova-export-bar {
		position: static;
	}
}

@media screen and ( max-width: 640px ) {

	.innova-export-group + .innova-export-group {
		border-inline-start: 0;
		padding-inline-start: 0;
	}
}

/* --------------------------------------------------------------- archive */

.innova-archive-list {
	display: grid;
	gap: 10px;
}

.innova-archive-item {
	background: var( --innova-surface );
	border: 1px solid var( --innova-border );
	border-radius: var( --innova-radius );
	box-shadow: var( --innova-shadow );
	overflow: hidden;
}

.innova-archive-head {
	align-items: center;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	gap: 12px;
	justify-content: space-between;
	padding: 14px 18px;
	text-align: start;
	width: 100%;
}

.innova-archive-head:hover {
	background: #fafbfd;
}

.innova-archive-head:focus-visible {
	outline: 2px solid var( --innova-teal );
	outline-offset: -2px;
}

.innova-archive-text {
	display: block;
	min-width: 0;
}

.innova-archive-title {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.innova-archive-customer {
	font-size: 13px;
}

.innova-archive-meta {
	color: var( --innova-muted );
	display: block;
	font-size: 11.5px;
	margin-top: 4px;
}

.innova-archive-value {
	color: var( --innova-navy );
	font-weight: 700;
	white-space: nowrap;
}

.innova-archive-body {
	border-top: 1px solid var( --innova-border );
	padding: 16px 18px;
}

/*
 * A label/value list, not a data grid. Dropping the vertical rules and keeping
 * only row separators stops nine fields reading as a spreadsheet, and the
 * rounded clip ties it to the card it sits in.
 */
.innova-fields-wrap {
	border: 1px solid var( --innova-border );
	border-radius: 10px;
	overflow: hidden;
}

.innova-fields-table {
	border-collapse: collapse;
	width: 100%;
}

.innova-fields-table tr:not( :last-child ) th,
.innova-fields-table tr:not( :last-child ) td {
	border-bottom: 1px solid var( --innova-border );
}

.innova-fields-table th,
.innova-fields-table td {
	font-size: 12.5px;
	line-height: 1.6;
	padding: 11px 14px;
	text-align: start;
	vertical-align: top;
}

.innova-fields-label {
	background: #f7f9fc;
	border-inline-end: 1px solid var( --innova-border );
	color: var( --innova-navy-2 );
	font-weight: 600;
	white-space: normal;
	width: 30%;
}

.innova-fields-value {
	color: var( --innova-text );
	/* Long links and pasted notes must wrap rather than widen the card. */
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.innova-fields-value.is-empty {
	color: #a9b2c0;
}

.innova-empty {
	background: var( --innova-surface );
	border: 1px dashed var( --innova-border );
	border-radius: var( --innova-radius );
	color: var( --innova-muted );
	margin: 0;
	padding: 26px;
	text-align: center;
}

/* ---------------------------------------------------------------- badges */

/*
 * Flex rather than inline-block: the badge holds an icon and a label, and
 * inline-block leaves them touching with no reliable way to space them.
 */
.innova-badge {
	align-items: center;
	border-radius: 100px;
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	gap: 5px;
	line-height: 1.5;
	padding: 3px 8px 2px;
	vertical-align: middle;
	white-space: nowrap;
}

.innova-badge-navy {
	background: var( --innova-navy-soft );
	color: var( --innova-navy-2 );
}

.innova-badge-teal {
	background: var( --innova-teal-soft );
	color: var( --innova-teal );
}

.innova-badge-orange {
	background: var( --innova-orange-soft );
	color: #b6631f;
}

/*
 * Status badges are solid fills, one colour per state, so an outcome reads at a
 * glance and is never confused with the tinted activity-type badge sitting next
 * to it. Eight tones, assigned in the type schema so that no two options within
 * the same status field share one.
 *
 * Every fill is dark enough to clear 4.5:1 against white text at badge size,
 * which tinted pastels with dark text could not guarantee once the palette grew
 * past three colours.
 */
.innova-tone-positive,
.innova-tone-negative,
.innova-tone-success,
.innova-tone-pending,
.innova-tone-warning,
.innova-tone-info,
.innova-tone-progress,
.innova-tone-neutral {
	color: #fff;
}

/*
 * Hues are spread deliberately far apart. An earlier pass used a teal and a
 * green only ~35 degrees apart, which is fine on a swatch board and unreadable
 * on an 11px badge — "Accepted" and "Deal won" looked identical in a list.
 * Each tone below sits in its own part of the wheel:
 * cyan 192 · green 142 · red 0 · orange 21 · amber 41 · blue 224 · violet 262 · slate 215.
 */
.innova-tone-positive {
	background: #0e7490; /* cyan */
}

.innova-tone-success {
	background: #15803d; /* green */
}

.innova-tone-negative {
	background: #b91c1c; /* red */
}

.innova-tone-pending {
	background: #c2410c; /* orange */
}

.innova-tone-warning {
	background: #a16207; /* amber */
}

.innova-tone-info {
	background: #1d4ed8; /* blue */
}

.innova-tone-progress {
	background: #6d28d9; /* violet */
}

.innova-tone-neutral {
	background: #475569; /* slate */
}

/* ----------------------------------------------------------------- toast */

.innova-toast {
	align-items: center;
	background: var( --innova-navy );
	border-radius: 10px;
	bottom: 24px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.25 );
	color: #fff;
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 9px;
	inset-inline-start: 50%;
	max-width: min( 92vw, 420px );
	opacity: 0;
	padding: 12px 20px;
	pointer-events: none;
	position: fixed;
	transform: translateX( -50% ) translateY( 16px );
	transition: opacity 0.2s, transform 0.2s;
	z-index: 100000;
}

.innova-toast-icon {
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
}

.innova-toast.is-success .innova-toast-icon {
	color: #6ee7d5;
}

.innova-toast.is-info .innova-toast-icon {
	color: #ffc48a;
}

.innova-toast.is-visible {
	opacity: 1;
	transform: translateX( -50% ) translateY( 0 );
}

/* ------------------------------------------------------------ admin bits */

.innova-sr-wrap .innova-table {
	margin-bottom: 26px;
}

.innova-logo-control {
	max-width: 320px;
}

.innova-logo-preview {
	background: var( --innova-navy-soft );
	border-radius: 8px;
	display: block;
	height: auto;
	max-width: 160px;
	padding: 10px;
}

/* --------------------------------------------------------------- portal */

/*
 * Fill whatever container the theme provides rather than imposing a second,
 * narrower width inside it — a themed page already constrains its own content
 * (Elementra uses --tewido-elementra-content-width). Set --innova-portal-width
 * on the page or in the customiser to cap the portal independently.
 */
.innova-sr-portal {
	margin-inline: auto;
	max-width: var( --innova-portal-width, 100% );
	width: 100%;
}

.innova-portal-header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 20px;
}

.innova-portal-logo {
	height: auto;
	max-width: 120px;
}

.innova-portal-titles h2 {
	color: var( --innova-navy );
	font-size: 19px;
	margin: 0;
}

.innova-portal-titles p {
	color: var( --innova-muted );
	font-size: 12px;
	margin: 2px 0 0;
}

.innova-user-chip {
	align-items: center;
	background: var( --innova-surface );
	border: 1px solid var( --innova-border );
	border-radius: 100px;
	display: flex;
	gap: 10px;
	padding: 6px 8px 6px 6px;
}

/* The sign-out control had no affordance at all — bare link text next to the
   avatar. It reads as a button now, and turns red on hover to signal that it
   ends the session. */
.innova-sr-portal .innova-btn-signout {
	background: var( --innova-navy-soft );
	border-color: transparent;
	color: var( --innova-navy-2 );
	margin-inline-start: 4px;
}

.innova-sr-portal .innova-btn-signout:hover,
.innova-sr-portal .innova-btn-signout:focus-visible {
	background: var( --innova-danger-soft );
	border-color: transparent;
	color: var( --innova-danger );
}

.innova-avatar {
	align-items: center;
	background: var( --innova-navy );
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	height: 36px;
	justify-content: center;
	text-transform: uppercase;
	width: 36px;
}

.innova-user-meta {
	line-height: 1.2;
}

/*
 * WordPress display names are often just the lowercase username. Capitalising
 * in CSS presents it properly without rewriting what the user stored — and it
 * is a no-op for scripts without letter case, such as Arabic.
 */
.innova-user-meta b {
	display: block;
	font-size: 13px;
	text-transform: capitalize;
}

.innova-user-meta span {
	color: var( --innova-muted );
	font-size: 11px;
}

.innova-tabs {
	background: var( --innova-navy-soft );
	border-radius: 12px;
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
	padding: 5px;
}

.innova-tab {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 9px;
	color: var( --innova-muted );
	cursor: pointer;
	display: flex;
	flex: 1;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	line-height: 1.4;
	min-height: 42px;
	padding: 10px 14px;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.innova-tab:hover {
	color: var( --innova-navy-2 );
}

.innova-tab.is-active {
	background: #fff;
	box-shadow: 0 2px 8px rgba( 24, 44, 75, 0.1 );
	color: var( --innova-navy );
}

.innova-tab.is-active .innova-icon {
	color: var( --innova-teal );
}

.innova-tab:focus-visible {
	outline: 2px solid var( --innova-teal );
	outline-offset: -2px;
}

/*
 * wp_login_form() emits bare markup that most themes leave alone, so the card
 * styles its fields itself rather than inheriting whatever the theme does to
 * a stray form.
 */
/* Two classes sit on the same element, so this must out-specify .innova-sr-portal. */
.innova-sr-portal.innova-sr-login {
	background: var( --innova-surface );
	border: 1px solid var( --innova-border );
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba( 24, 44, 75, 0.1 );
	margin: 40px auto;
	max-width: 400px;
	padding: 36px 34px 30px;
	text-align: center;
}

.innova-sr-login .innova-portal-logo {
	display: block;
	margin: 0 auto 18px;
	max-width: 132px;
}

.innova-sr-login h2 {
	color: var( --innova-navy );
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
	margin: 0 0 6px;
}

.innova-sr-login .innova-muted {
	display: block;
	font-size: 13px;
	line-height: 1.6;
	margin: 0 auto 22px;
	max-width: 30ch;
}

.innova-sr-login form {
	margin: 0;
	text-align: start;
}

.innova-sr-login form p {
	margin: 0 0 14px;
}

.innova-sr-login form label {
	color: var( --innova-navy-2 );
	display: block;
	font-size: 12px;
	font-weight: 700;
	margin: 0 0 6px;
}

.innova-sr-login form input[type="text"],
.innova-sr-login form input[type="email"],
.innova-sr-login form input[type="password"] {
	background: #fbfcfe;
	border: 1.5px solid var( --innova-border );
	border-radius: 9px;
	box-shadow: none;
	color: var( --innova-text );
	display: block;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	max-width: 100%;
	padding: 11px 13px;
	transition: border-color 0.15s, background 0.15s;
	width: 100%;
}

.innova-sr-login form input[type="text"]:focus,
.innova-sr-login form input[type="email"]:focus,
.innova-sr-login form input[type="password"]:focus {
	background: #fff;
	border-color: var( --innova-teal );
	box-shadow: 0 0 0 3px rgba( 40, 140, 130, 0.14 );
	outline: none;
}

/*
 * accent-color repaints the native tick and radio dot in brand navy instead of
 * the browser's default blue, without replacing the control (so the OS keeps
 * its own focus, high-contrast and forced-colors handling).
 */
.innova-sr input[type="checkbox"],
.innova-sr input[type="radio"],
.innova-sr-portal input[type="checkbox"],
.innova-sr-portal input[type="radio"] {
	accent-color: var( --innova-navy );
}

.innova-sr-login .login-remember input[type="checkbox"] {
	height: 16px;
	width: 16px;
}

/* The remember-me label wraps its own checkbox, so it must not be a block. */
.innova-sr-login .login-remember label {
	align-items: center;
	color: var( --innova-muted );
	display: flex;
	font-size: 12.5px;
	font-weight: 500;
	gap: 8px;
	margin: 0;
}

.innova-sr-login .login-remember input[type="checkbox"] {
	margin: 0;
}

.innova-sr-login .login-submit {
	margin: 20px 0 0;
}

.innova-sr-login .login-submit input[type="submit"] {
	background: var( --innova-navy );
	border: 0;
	border-radius: 9px;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	padding: 12px 20px;
	text-shadow: none;
	transition: background 0.15s;
	width: 100%;
}

.innova-sr-login .login-submit input[type="submit"]:hover,
.innova-sr-login .login-submit input[type="submit"]:focus {
	background: var( --innova-navy-2 );
}

.innova-sr-login .login-submit input[type="submit"]:focus-visible {
	outline: 2px solid var( --innova-teal );
	outline-offset: 2px;
}

.innova-login-foot {
	border-top: 1px solid var( --innova-border );
	margin: 22px 0 0;
	padding-top: 16px;
}

.innova-login-foot a {
	color: var( --innova-muted );
	font-size: 12.5px;
	text-decoration: none;
}

.innova-login-foot a:hover,
.innova-login-foot a:focus {
	color: var( --innova-navy );
	text-decoration: underline;
}

/* ---------------------------------------------------------- small screens */

@media screen and ( max-width: 782px ) {

	.innova-grid {
		grid-template-columns: 1fr;
	}

	.innova-type-grid {
		grid-template-columns: repeat( 3, 1fr );
	}

	.innova-archive-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.innova-card {
		padding: 16px 14px;
	}

	/*
	 * Header stacks and centres: at phone width the logo, the two title lines
	 * and the user chip cannot share a row without the chip overflowing.
	 */
	.innova-portal-header {
		align-items: center;
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}

	.innova-portal-titles h2 {
		font-size: 17px;
	}

	.innova-user-chip {
		flex-wrap: wrap;
		justify-content: center;
		max-width: 100%;
	}

	.innova-summary {
		grid-template-columns: 1fr;
	}

	.innova-stat-value {
		font-size: 21px;
	}

	/* A docked bar costs too much of a phone screen. */
	.innova-export-bar {
		position: static;
	}

	.innova-export-intro {
		margin-inline-end: 0;
		width: 100%;
	}

	.innova-fields-label {
		width: 40%;
	}

	/*
	 * Stacking the save bar switches the flex axis to vertical, where the
	 * hint's `flex: 1 1 260px` basis applies to height instead of width and
	 * inflates the card to a screenful of blank space. Reset it to content
	 * height, and stop docking the card — on a phone it would cover the form
	 * it belongs to.
	 */
	.innova-save-card {
		position: static;
	}

	.innova-save-bar {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.innova-save-hint {
		flex: 0 0 auto;
		max-width: none;
	}

	.innova-save-actions {
		justify-content: stretch;
	}

	.innova-save-actions .innova-btn {
		flex: 1 1 auto;
	}
}

@media screen and ( max-width: 480px ) {

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

	.innova-tabs {
		flex-direction: column;
	}

	.innova-portal-logo {
		max-width: 104px;
	}
}

/* ----------------------------------------------------- reduced motion --- */

@media ( prefers-reduced-motion: reduce ) {

	.innova-sr *,
	.innova-sr-portal * {
		transition-duration: 0.01ms !important;
	}
}

.tewido-elementra-canvas-main>.tewido-elementra-canvas-content {
    padding: 0 20px !important;
}