/**
 * JustPlugIt Sales Suite - basisstijl.
 *
 * Design tokens volgens architectuur 9.1. Bewust los van de WordPress-admin:
 * lichte kaarten op een neutrale ondergrond, dunne lijnen, goud als accent.
 */

:root {
	--jp-ink-900: #1C1F23;
	--jp-ink-700: #2E3339;
	--jp-ink-500: #5B636D;
	--jp-ink-300: #A7AEB6;
	--jp-surface: #FFFFFF;
	--jp-canvas: #F6F7F9;
	--jp-line: #E6E9ED;
	--jp-gold-600: #B08D2A;
	--jp-gold-500: #C9A227;
	--jp-gold-100: #F7F0D8;
	--jp-success: #2E7D5B;
	--jp-warning: #B67B1F;
	--jp-danger: #B3453C;

	--jp-radius-sm: 8px;
	--jp-radius-md: 14px;
	--jp-radius-lg: 20px;

	--jp-shadow-sm: 0 1px 2px rgba(28, 31, 35, .06), 0 1px 3px rgba(28, 31, 35, .04);
	--jp-shadow-md: 0 4px 12px rgba(28, 31, 35, .07);

	--jp-space-1: 4px;
	--jp-space-2: 8px;
	--jp-space-3: 12px;
	--jp-space-4: 16px;
	--jp-space-5: 24px;
	--jp-space-6: 32px;
	--jp-space-7: 48px;
	--jp-space-8: 64px;
}

body.jp-sales {
	margin: 0;
	background: var(--jp-canvas);
	color: var(--jp-ink-900);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	font-variant-numeric: tabular-nums;
}

.jp-topbar {
	display: flex;
	align-items: center;
	gap: var(--jp-space-6);
	padding: var(--jp-space-3) var(--jp-space-6);
	background: var(--jp-surface);
	border-bottom: 1px solid var(--jp-line);
}

.jp-topbar__brand {
	display: flex;
	align-items: center;
	gap: var(--jp-space-2);
	text-decoration: none;
	color: var(--jp-ink-900);
	font-weight: 600;
}

.jp-topbar__mark {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: linear-gradient(140deg, var(--jp-gold-500), var(--jp-gold-600));
}

.jp-topbar__nav {
	display: flex;
	gap: var(--jp-space-4);
	margin-right: auto;
}

.jp-topbar__nav a {
	color: var(--jp-ink-500);
	text-decoration: none;
	padding: var(--jp-space-1) 0;
	border-bottom: 2px solid transparent;
}

.jp-topbar__nav a:hover {
	color: var(--jp-ink-900);
	border-bottom-color: var(--jp-gold-500);
}

.jp-topbar__user {
	display: flex;
	align-items: center;
	gap: var(--jp-space-3);
	color: var(--jp-ink-500);
	font-size: 14px;
}

.jp-main {
	min-height: 60vh;
}

.jp-page {
	max-width: 1120px;
	margin: 0 auto;
	padding: var(--jp-space-7) var(--jp-space-5);
}

.jp-page--narrow {
	max-width: 640px;
	text-align: center;
}

.jp-page__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jp-space-4);
	margin-bottom: var(--jp-space-5);
}

.jp-page__title {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.jp-muted {
	color: var(--jp-ink-500);
}

.jp-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--jp-space-4);
	margin-bottom: var(--jp-space-5);
}

.jp-tile {
	display: flex;
	flex-direction: column;
	gap: var(--jp-space-1);
	padding: var(--jp-space-5);
	background: var(--jp-surface);
	border: 1px solid var(--jp-line);
	border-radius: var(--jp-radius-md);
	box-shadow: var(--jp-shadow-sm);
}

.jp-tile__label {
	color: var(--jp-ink-500);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.jp-tile__count {
	font-size: 30px;
	font-weight: 600;
}

.jp-tile__amount {
	color: var(--jp-ink-700);
}

.jp-tile--accepted .jp-tile__count {
	color: var(--jp-gold-600);
}

.jp-shortcuts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jp-space-3);
	margin-bottom: var(--jp-space-5);
}

.jp-shortcut {
	padding: var(--jp-space-3) var(--jp-space-5);
	background: var(--jp-surface);
	border: 1px solid var(--jp-line);
	border-radius: var(--jp-radius-sm);
	color: var(--jp-ink-700);
}

.jp-shortcut.is-disabled {
	color: var(--jp-ink-300);
	background: transparent;
	border-style: dashed;
	cursor: not-allowed;
}

.jp-card {
	padding: var(--jp-space-5);
	margin-bottom: var(--jp-space-5);
	background: var(--jp-surface);
	border: 1px solid var(--jp-line);
	border-radius: var(--jp-radius-md);
	box-shadow: var(--jp-shadow-sm);
}

.jp-card__title {
	margin: 0 0 var(--jp-space-4);
	font-size: 17px;
	font-weight: 600;
}

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

.jp-table th,
.jp-table td {
	padding: var(--jp-space-3) var(--jp-space-2);
	text-align: left;
	border-bottom: 1px solid var(--jp-line);
	vertical-align: top;
}

.jp-table th {
	color: var(--jp-ink-500);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
}

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

.jp-table__amount {
	text-align: right;
	white-space: nowrap;
}

.jp-badge {
	display: inline-block;
	padding: 2px var(--jp-space-2);
	border-radius: 999px;
	font-size: 12px;
	background: var(--jp-canvas);
	color: var(--jp-ink-700);
	border: 1px solid var(--jp-line);
}

.jp-badge--sent {
	background: var(--jp-gold-100);
	border-color: var(--jp-gold-500);
	color: var(--jp-gold-600);
}

.jp-badge--accepted {
	background: rgba(46, 125, 91, .1);
	border-color: var(--jp-success);
	color: var(--jp-success);
}

.jp-badge--declined,
.jp-badge--cancelled {
	background: rgba(179, 69, 60, .08);
	border-color: var(--jp-danger);
	color: var(--jp-danger);
}

.jp-toggle {
	display: inline-flex;
	background: var(--jp-surface);
	border: 1px solid var(--jp-line);
	border-radius: 999px;
	overflow: hidden;
}

.jp-toggle__item {
	padding: var(--jp-space-2) var(--jp-space-4);
	color: var(--jp-ink-500);
	text-decoration: none;
	font-size: 14px;
}

.jp-toggle__item.is-active {
	background: var(--jp-ink-900);
	color: #fff;
}

.jp-auth {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: var(--jp-space-5);
}

.jp-auth__panel {
	width: 100%;
	max-width: 380px;
	padding: var(--jp-space-6);
	background: var(--jp-surface);
	border: 1px solid var(--jp-line);
	border-radius: var(--jp-radius-lg);
	box-shadow: var(--jp-shadow-md);
}

.jp-auth__title {
	margin: 0 0 var(--jp-space-1);
	font-size: 22px;
}

.jp-auth__subtitle {
	margin: 0 0 var(--jp-space-5);
	color: var(--jp-ink-500);
}

.jp-auth__hint {
	margin: var(--jp-space-4) 0 0;
	font-size: 14px;
}

.jp-auth__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--jp-space-4);
	margin-top: var(--jp-space-5);
}

.jp-field {
	display: block;
	margin-bottom: var(--jp-space-4);
}

.jp-field__label {
	display: block;
	margin-bottom: var(--jp-space-1);
	font-size: 14px;
	color: var(--jp-ink-700);
}

.jp-input {
	width: 100%;
	padding: 10px var(--jp-space-3);
	font-size: 15px;
	color: var(--jp-ink-900);
	background: var(--jp-surface);
	border: 1px solid var(--jp-line);
	border-radius: var(--jp-radius-sm);
	box-sizing: border-box;
}

.jp-input:focus {
	outline: none;
	border-color: var(--jp-gold-500);
	box-shadow: 0 0 0 3px var(--jp-gold-100);
}

.jp-checkbox {
	display: flex;
	align-items: center;
	gap: var(--jp-space-2);
	margin-bottom: var(--jp-space-4);
	font-size: 14px;
	color: var(--jp-ink-700);
}

.jp-button {
	display: inline-block;
	padding: 10px var(--jp-space-5);
	font-size: 15px;
	font-weight: 500;
	color: var(--jp-ink-900);
	background: var(--jp-surface);
	border: 1px solid var(--jp-line);
	border-radius: var(--jp-radius-sm);
	text-decoration: none;
	cursor: pointer;
}

.jp-button--primary {
	width: 100%;
	color: #fff;
	background: var(--jp-ink-900);
	border-color: var(--jp-ink-900);
}

.jp-button--primary:hover {
	background: var(--jp-ink-700);
}

.jp-link {
	color: var(--jp-ink-500);
	text-decoration: none;
	border-bottom: 1px solid var(--jp-line);
}

.jp-link:hover {
	color: var(--jp-ink-900);
	border-bottom-color: var(--jp-gold-500);
}

.jp-alert {
	padding: var(--jp-space-3) var(--jp-space-4);
	margin-bottom: var(--jp-space-4);
	border-radius: var(--jp-radius-sm);
	border: 1px solid var(--jp-line);
	font-size: 14px;
}

.jp-alert--danger {
	background: rgba(179, 69, 60, .07);
	border-color: var(--jp-danger);
	color: var(--jp-danger);
}

.jp-alert--warning {
	background: rgba(182, 123, 31, .08);
	border-color: var(--jp-warning);
	color: var(--jp-warning);
}

.jp-alert--success {
	background: rgba(46, 125, 91, .08);
	border-color: var(--jp-success);
	color: var(--jp-success);
}

.jp-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.jp-dot--ok {
	background: var(--jp-success);
}

.jp-dot--warn {
	background: var(--jp-warning);
}

.jp-status__icon {
	width: 24px;
}

.jp-status__value {
	color: var(--jp-ink-700);
	white-space: nowrap;
}

.jp-code {
	padding: var(--jp-space-3);
	background: var(--jp-ink-900);
	color: #fff;
	border-radius: var(--jp-radius-sm);
	overflow-x: auto;
	text-align: left;
	font-size: 13px;
}

.jp-footer {
	padding: var(--jp-space-5);
	text-align: center;
	color: var(--jp-ink-300);
	font-size: 13px;
}

.jp-row--warning td {
	background: rgba(182, 123, 31, .05);
}

.jp-row--error td {
	background: rgba(179, 69, 60, .05);
}

/* ---------------------------------------------------------------------------
   Offerte-editor (Sprint 2B.0)
   ------------------------------------------------------------------------ */

.jp-editor__hint {
	margin-left: var(--jp-space-2);
	font-size: 13px;
}

.jp-editor__grid {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
	gap: var(--jp-space-5);
	align-items: start;
}

@media (max-width: 900px) {
	.jp-editor__grid {
		grid-template-columns: 1fr;
	}
}

.jp-editor__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jp-space-3);
}

.jp-editor__fields .jp-field--company,
.jp-editor__fields .jp-field--contact,
.jp-editor__fields .jp-field--email,
.jp-editor__fields .jp-field--address {
	grid-column: 1 / -1;
}

.jp-field.has-error .jp-input {
	border-color: var(--jp-danger);
}

.jp-alert__list {
	margin: 0;
	padding-left: 18px;
}

.jp-search {
	position: relative;
	margin-bottom: var(--jp-space-4);
}

.jp-search__results {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin: var(--jp-space-1) 0 0;
	padding: var(--jp-space-1);
	list-style: none;
	background: var(--jp-surface);
	border: 1px solid var(--jp-line);
	border-radius: var(--jp-radius-sm);
	box-shadow: var(--jp-shadow-md);
	max-height: 320px;
	overflow-y: auto;
}

.jp-search__item {
	display: flex;
	width: 100%;
	justify-content: space-between;
	gap: var(--jp-space-3);
	padding: var(--jp-space-2) var(--jp-space-3);
	background: none;
	border: 0;
	border-radius: var(--jp-radius-sm);
	text-align: left;
	font: inherit;
	color: var(--jp-ink-900);
	cursor: pointer;
}

.jp-search__item:hover,
.jp-search__item:focus {
	background: var(--jp-gold-100);
	outline: none;
}

.jp-search__meta,
.jp-search__none {
	color: var(--jp-ink-500);
	font-size: 13px;
	white-space: nowrap;
}

.jp-search__none {
	padding: var(--jp-space-2) var(--jp-space-3);
}

.jp-lines__qty {
	width: 96px;
}

.jp-input--qty {
	width: 80px;
	text-align: right;
}

.jp-lines__remove {
	width: 40px;
	text-align: right;
}

.jp-line__sku {
	display: block;
	font-size: 12px;
}

.jp-line__desc {
	display: block;
	font-size: 12px;
	max-width: 420px;
}

.jp-line__legal {
	display: block;
	font-size: 11px;
	max-width: 420px;
}

.jp-button--ghost {
	background: none;
	border: 1px solid transparent;
	color: var(--jp-ink-500);
	padding: 2px 8px;
	line-height: 1;
	font-size: 18px;
}

.jp-button--ghost:hover {
	color: var(--jp-danger);
	border-color: var(--jp-line);
}

.jp-totals {
	margin: var(--jp-space-4) 0 0;
	margin-left: auto;
	max-width: 360px;
	border-top: 1px solid var(--jp-line);
	padding-top: var(--jp-space-3);
}

.jp-totals__row {
	display: flex;
	justify-content: space-between;
	gap: var(--jp-space-4);
	padding: var(--jp-space-1) 0;
}

.jp-totals__row dt {
	color: var(--jp-ink-500);
}

.jp-totals__row dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.jp-totals__row--grand {
	margin-top: var(--jp-space-2);
	padding-top: var(--jp-space-2);
	border-top: 1px solid var(--jp-line);
	font-weight: 600;
	font-size: 18px;
}

.jp-totals__row--grand dt {
	color: var(--jp-ink-900);
}

.jp-editor__actions {
	display: flex;
	align-items: center;
	gap: var(--jp-space-4);
	margin-top: var(--jp-space-5);
}

.jp-editor__delete {
	margin-top: var(--jp-space-3);
}

.jp-button--danger {
	border-color: var(--jp-danger);
	color: var(--jp-danger);
}

.jp-button--danger:hover {
	background: var(--jp-danger);
	color: #fff;
}

a.jp-shortcut {
	text-decoration: none;
}

a.jp-shortcut:hover {
	border-color: var(--jp-gold-500);
	color: var(--jp-ink-900);
}

/* Offerte-editor: PDF-knop (Sprint 2C) */

.jp-editor__tools {
	display: flex;
	align-items: center;
	gap: var(--jp-space-4);
}

.jp-button--secondary {
	background: var(--jp-surface);
	border: 1px solid var(--jp-gold-500);
	color: var(--jp-ink-900);
	text-decoration: none;
}

.jp-button--secondary:hover {
	background: var(--jp-gold-100);
}

.jp-button.is-disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Offerte online accorderen (Sprint 3A) */

.jp-editor__accept-link {
	margin-top: var(--jp-space-3);
}

.jp-accept-link__row {
	display: flex;
	gap: var(--jp-space-2);
	margin-top: var(--jp-space-2);
}

.jp-accept-link__input {
	flex: 1 1 auto;
	font-family: monospace;
}

.jp-accept {
	max-width: 720px;
}

/* Handmatige regel (Sprint 4). */
.jp-manual-line {
	margin-bottom: var(--jp-space-4);
	padding: var(--jp-space-3);
	border: 1px dashed var(--jp-line);
	border-radius: var(--jp-radius-sm);
	background: var(--jp-surface-muted, transparent);
}

.jp-manual-line__summary {
	cursor: pointer;
	font-weight: 600;
}

.jp-manual-line__fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jp-space-3);
	margin-top: var(--jp-space-3);
	align-items: flex-end;
}

.jp-manual-line__fields .jp-field {
	flex: 1 1 220px;
}

.jp-manual-line__fields .jp-field--narrow {
	flex: 0 1 140px;
}

.jp-manual-line__error {
	margin-top: var(--jp-space-2);
	color: var(--jp-danger, #B3261E);
}

.jp-line--manual .jp-line__sku {
	font-style: italic;
}

/* Optionele JustPlugIt Startservice in de offerte-editor (Fase 23). */
.jp-startservice {
	margin-top: var(--jp-space-3);
	padding: var(--jp-space-3) var(--jp-space-4);
	border: 1px dashed var(--jp-line);
	border-radius: 6px;
}

.jp-startservice[hidden] {
	display: none;
}

.jp-startservice .jp-checkbox {
	margin-bottom: var(--jp-space-2);
	font-weight: 500;
	color: var(--jp-ink-900);
}

.jp-startservice__scope,
.jp-startservice__note {
	margin: 0 0 var(--jp-space-1);
	font-size: 13px;
}

.jp-line--startservice .jp-line__sku {
	font-style: italic;
}

.jp-line__fixed-qty {
	display: inline-block;
	min-width: 2ch;
	text-align: center;
}

/* Publieke Startservicevoorwaarden (Fase 24). */
.jp-terms {
	max-width: 760px;
	line-height: 1.6;
}

.jp-terms p {
	margin: 0 0 var(--jp-space-3);
}

.jp-terms__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--jp-space-3) var(--jp-space-5);
	margin: 0;
}

.jp-terms__facts dt {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--jp-ink-500, #6b7280);
}

.jp-terms__facts dd {
	margin: 2px 0 0;
	font-weight: 500;
}

.jp-terms__subtitle {
	margin: var(--jp-space-4) 0 var(--jp-space-2);
	font-size: 15px;
	font-weight: 600;
}

.jp-terms__list {
	margin: 0 0 var(--jp-space-3);
	padding-left: 1.25em;
}

.jp-terms__list li {
	margin-bottom: var(--jp-space-1);
}

.jp-terms__excluded {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 var(--jp-space-5);
}

@media (max-width: 600px) {
	.jp-terms {
		padding: var(--jp-space-5) var(--jp-space-4);
	}

	.jp-terms .jp-page__title {
		font-size: 22px;
	}
}

.jp-startservice__terms {
	margin: 0;
	font-size: 13px;
}

/* Route 2: consumenteninformatie en partneruitvoering op de akkoordpagina. Rustig, geen waarschuwingsblok. */
.jp-consumer-info p,
.jp-partner-info p {
	margin: 0 0 var(--jp-space-2);
}

.jp-consumer-info__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jp-space-2) var(--jp-space-4);
	margin: var(--jp-space-3) 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.jp-checkbox--optional {
	align-items: flex-start;
}

.jp-checkbox__note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
}

/* Interne partneropvolging (Neovolt e.a.) in de offerte-editor. Rustig, alleen voor medewerkers. */
.jp-meta {
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	gap: var(--jp-space-1, 4px) var(--jp-space-3, 12px);
	margin: 0 0 var(--jp-space-3, 12px);
}

.jp-meta dt {
	color: var(--jp-muted, #6b7280);
}

.jp-meta dd {
	margin: 0;
}

.jp-editor__partner-action {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--jp-space-2, 8px);
}