/**
 * Design system layer. Loaded last so padding, boxes and type
 * follow web/app/themes/cv-mallen/docs/cvm-designsystem.md.
 * Color variants stay color-only.
 */

.cjs-app .cjs-main {
	max-width: 1160px;
	width: 100%;
	margin: 0 auto;
	padding: 16px 16px 24px;
}

@media (min-width: 900px) {
	.cjs-app .cjs-main {
		padding: 26px 32px 30px;
	}
}

.cjs-app .cjs-view {
	gap: 24px;
}

.cjs-app .cjs-layout {
	gap: 22px;
}

.cjs-app .cjs-layout__main,
.cjs-app .cjs-layout__side,
.cjs-app .cjs-edit-main,
.cjs-app .cjs-edit-side,
.cjs-app .cjs-docs-grid,
.cjs-app .cjs-docs-section,
.cjs-app .cjs-konto {
	gap: 16px;
}

.cjs-app .cjs-docs-section + .cjs-docs-section {
	margin-top: 24px;
	padding-top: 0;
}

/* Type — tokens (mobile-first; desktop bump in cjs-base) */
.cjs-app .cjs-hero__title,
.cjs-app .cjs-home-hero__title,
.cjs-app .cjs-konto__title,
.cjs-app .cjs-upgrade-page__title {
	font-size: var(--cjs-t-h1);
	font-weight: 800;
	letter-spacing: -0.5px;
	line-height: 1.15;
}

@media (min-width: 900px) {
	.cjs-app .cjs-hero__title,
	.cjs-app .cjs-home-hero__title,
	.cjs-app .cjs-konto__title,
	.cjs-app .cjs-upgrade-page__title {
		letter-spacing: -0.6px;
	}
}

.cjs-app .cjs-docs-section__head h2,
.cjs-app .cjs-matches__title {
	font-size: var(--cjs-t-h2);
	font-weight: 800;
	letter-spacing: -0.3px;
}

@media (min-width: 900px) {
	.cjs-app .cjs-docs-section__head h2,
	.cjs-app .cjs-matches__title {
		letter-spacing: -0.4px;
	}
}

.cjs-app .cjs-hero__lead,
.cjs-app .cjs-home-hero__lead,
.cjs-app .cjs-konto__lead,
.cjs-app .cjs-upgrade-page__lead,
.cjs-app .cjs-card__text,
.cjs-app .cjs-edit-section__empty {
	font-size: var(--cjs-t-body);
	font-weight: 400;
	line-height: 1.5;
	color: var(--cjs-muted);
	max-width: 70ch;
}

.cjs-app .cjs-docs-empty {
	display: block;
	font-size: var(--cjs-t-body);
	font-weight: 400;
	line-height: 1.5;
	color: var(--cjs-muted);
	width: 100%;
	max-width: none;
	align-self: stretch;
	box-sizing: border-box;
}

.cjs-app .cjs-docs-section {
	width: 100%;
	align-items: stretch;
}

.cjs-app .cjs-view--dokument,
.cjs-app .cjs-view--cv-list,
.cjs-app .cjs-view--pb-list,
.cjs-app .cjs-view--uppladdat,
.cjs-app .cjs-view--no-cv,
.cjs-app .cjs-view--home,
.cjs-app .cjs-view--sokta {
	width: 100%;
	align-items: stretch;
}

.cjs-app .cjs-card__title,
.cjs-app .cjs-card__bar-title,
.cjs-app .cjs-doc-card__title,
.cjs-app .cjs-job-card__title,
.cjs-app .cjs-search-job__main h2,
.cjs-app .cjs-konto-card__head h2,
.cjs-app .cjs-edit-section__head h2,
.cjs-app .cjs-edit-card__title,
.cjs-app .cjs-profile-card h2,
.cjs-app .cjs-home-profile__copy h2 {
	font-size: var(--cjs-t-card);
	font-weight: 700;
	letter-spacing: 0;
}

.cjs-app .cjs-file-row__name,
.cjs-app .cjs-applied-row__title,
.cjs-app .cjs-edit-entry__top strong {
	font-size: var(--cjs-t-item);
	font-weight: 700;
	line-height: 1.35;
}

.cjs-app .cjs-edit-entry__text,
.cjs-app .cjs-edit-entry__body,
.cjs-app .cjs-edit-entry__main p {
	font-size: var(--cjs-t-body);
	font-weight: 400;
	line-height: 1.35;
}

.cjs-app .cjs-file-row__meta,
.cjs-app .cjs-applied-row__company,
.cjs-app .cjs-doc-card__meta,
.cjs-app .cjs-job-card__meta,
.cjs-app .cjs-edit-entry__top span,
.cjs-app .cjs-edit-entry__date,
.cjs-app .cjs-hint,
.cjs-app .cjs-docs-section__count {
	font-size: var(--cjs-t-meta);
	font-weight: 400;
	color: var(--cjs-muted);
}

.cjs-app .cjs-applied-row__date,
.cjs-app .cjs-doc-card__edited,
.cjs-app .cjs-file-row__meta time {
	font-size: var(--cjs-t-meta);
	font-weight: 400;
	color: var(--cjs-date);
}

.cjs-app .cjs-card__eyebrow,
.cjs-app .cjs-edit-card__label,
.cjs-app .cjs-edit-card__eyebrow,
.cjs-app .cjs-doc-card__ribbon {
	font-size: var(--cjs-t-label);
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--cjs-faint);
}

.cjs-app .cjs-edit-person-grid label span,
.cjs-app .cjs-edit-form label span,
.cjs-app .cjs-konto-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cjs-muted);
}

/* Cards */
.cjs-app .cjs-card,
.cjs-app .cjs-konto-card,
.cjs-app .cjs-doc-card,
.cjs-app .cjs-job-card,
.cjs-app .cjs-search-job,
.cjs-app .cjs-followup-card,
.cjs-app .cjs-edit-section,
.cjs-app .cjs-edit-card,
.cjs-app .cjs-edit-ai,
.cjs-app .cjs-file-list,
.cjs-app .cjs-applied-list {
	border: 1px solid var(--cjs-border);
	border-radius: 14px;
	box-shadow: none;
}

.cjs-app .cjs-card,
.cjs-app .cjs-edit-section,
.cjs-app .cjs-edit-card {
	padding: 14px 20px 18px;
}

.cjs-app .cjs-card--panel,
.cjs-app .cjs-konto-card,
.cjs-app .cjs-doc-card,
.cjs-app .cjs-job-card,
.cjs-app .cjs-search-job,
.cjs-app .cjs-followup-card,
.cjs-app .cjs-file-list,
.cjs-app .cjs-applied-list {
	padding: 0;
	overflow: hidden;
	background: var(--cjs-surface);
}

.cjs-app .cjs-card__bar,
.cjs-app .cjs-konto-card__head,
.cjs-app .cjs-doc-card__head,
.cjs-app .cjs-followup-card__bar,
.cjs-app .cjs-edit-section__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 20px;
	margin: 0;
	background: var(--cjs-surface);
	border-bottom: 1px solid var(--cjs-divider);
}

.cjs-app .cjs-followup-card__bar {
	background: var(--cjs-gold-tint);
	border-bottom-color: var(--cjs-gold-line);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--cjs-gold-text);
}

.cjs-app .cjs-followup-card--interview .cjs-followup-card__bar {
	background: var(--cjs-green-tint);
	border-bottom-color: #b7dcc4;
	color: var(--cjs-green-text);
}

.cjs-app .cjs-followup-card {
	border-color: var(--cjs-gold-line);
}

.cjs-app .cjs-followup-card--interview {
	border-color: #b7dcc4;
}

.cjs-app .cjs-edit-section__head {
	margin: -14px -20px 16px;
}

.cjs-app .cjs-card__body,
.cjs-app .cjs-konto-card__body,
.cjs-app .cjs-doc-card__body,
.cjs-app .cjs-followup-card__body,
.cjs-app .cjs-konto-row {
	padding: 14px 20px 22px;
}

.cjs-app .cjs-job-card__row,
.cjs-app .cjs-search-job__row {
	padding: 13px 15px;
	gap: 12px;
	min-height: 44px;
}

.cjs-app .cjs-konto-card__icon,
.cjs-app .cjs-edit-section__icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--cjs-blue-tint);
	border: 1px solid var(--cjs-blue-line);
	color: var(--cjs-blue-text);
}

.cjs-app .cjs-doc-card--main .cjs-doc-card__head {
	background: var(--cjs-gold-tint);
	border-bottom-color: var(--cjs-gold-line);
	color: var(--cjs-gold-text);
}

.cjs-app .cjs-doc-card--main .cjs-doc-card__ribbon {
	color: var(--cjs-gold-text);
}

.cjs-app .cjs-doc-card--pb-app .cjs-doc-card__head {
	background: var(--cjs-blue-tint);
	border-bottom-color: var(--cjs-blue-line);
	color: var(--cjs-blue-text);
}

.cjs-app .cjs-doc-card--pb-app .cjs-doc-card__ribbon {
	color: var(--cjs-blue-text);
}

.cjs-app .cjs-edit-ai {
	background: var(--cjs-gold-tint);
	border-color: var(--cjs-gold-line);
}

/* Rows inside a card: one fill, 10px apart, radius smaller than the card */
.cjs-app .cjs-file-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px 16px;
	background: var(--cjs-surface);
	border: 1px solid var(--cjs-border);
	border-radius: var(--cjs-r-card);
	overflow: visible;
	box-shadow: none;
}

@media (min-width: 900px) {
	.cjs-app .cjs-file-list {
		padding: 14px 20px 18px;
	}
}

/* Each application is its own card. The list itself is not a card. */
.cjs-app .cjs-applied-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}

.cjs-app .cjs-edit-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.cjs-app .cjs-file-row,
.cjs-app .cjs-edit-entry,
.cjs-app .cjs-followup-row {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 44px;
	height: 44px;
	padding: 0 15px;
	gap: 12px;
	background: var(--cjs-row);
	border: 0;
	border-radius: 9px;
	box-shadow: none;
}

/* Application row module: layout in cjs-sokta.css. */

.cjs-app .cjs-edit-entry--text,
.cjs-app .cjs-edit-entry--job,
.cjs-app .cjs-edit-entry--person {
	height: auto;
	min-height: 44px;
	padding: 12px 15px;
	align-items: flex-start;
}

.cjs-app .cjs-edit-entry__view {
	align-items: flex-start;
	width: 100%;
	min-height: 0;
}

.cjs-app .cjs-file-row:last-child {
	border-bottom: 0;
}

/* Icon buttons — no white plate inside a filled row */
.cjs-app .cjs-icon-btn,
.cjs-app .cjs-edit-chip,
.cjs-app button.cjs-edit-chip {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	box-shadow: none;
	color: var(--cjs-muted);
}

.cjs-app .cjs-icon-btn:hover,
.cjs-app .cjs-edit-chip:hover {
	background: var(--cjs-row-alt);
}

.cjs-app .cjs-icon-btn--danger,
.cjs-app .cjs-edit-chip--danger {
	color: var(--cjs-red-text);
}

.cjs-app .cjs-input,
.cjs-app textarea.cjs-input,
.cjs-app select.cjs-input {
	border: 1px solid var(--cjs-field-border);
	border-radius: 9px;
	background: var(--cjs-surface);
	color: var(--cjs-ink);
	font-size: 15px;
}

.cjs-app .cjs-input:not(textarea) {
	height: 44px;
	padding: 0 14px;
}

.cjs-app textarea.cjs-input,
.cjs-app .cjs-input--area {
	height: auto;
	padding: 13px 14px;
	line-height: 1.5;
	resize: none;
}

/* Add-row buttons hug their label. Full-width only with .cjs-btn--full. */
.cjs-app .cjs-edit-add-btn,
.cjs-app button.cjs-edit-add-btn {
	display: inline-flex;
	align-self: flex-start;
	width: auto;
	max-width: 100%;
}

.cjs-app .cjs-edit-add-btn.cjs-btn--full,
.cjs-app button.cjs-edit-add-btn.cjs-btn--full {
	display: flex;
	align-self: stretch;
	width: 100%;
}

.cjs-app .cjs-edit-add-btn .cjs-btn__label {
	flex: 0 0 auto;
}

.cjs-app .cjs-edit-add-btn.cjs-btn--full .cjs-btn__label {
	flex: 1 1 auto;
	justify-content: center;
}

/* Facit. Longhands only — font shorthand with a variable was dropped,
   so nav inherited 16px (logo 20 / nav 16 = 1.25) and row line-height
   stacked on the padding. */
html {
	font-size: 16px;
}

.cjs-app .cjs-logo {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.4px;
}

@media (min-width: 900px) {
	.cjs-app .cjs-logo {
		font-size: 20px;
	}
}

.cjs-app .cjs-top__link {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.cjs-app .cjs-btn,
.cjs-app button.cjs-btn,
.cjs-app a.cjs-btn,
.cjs-app span.cjs-btn,
.cjs-app .cjs-btn__icon,
.cjs-app .cjs-btn__label {
	box-sizing: border-box;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	height: 40px;
	min-height: 40px;
	max-height: 40px;
	padding-top: 0;
	padding-bottom: 0;
}

.cjs-app .cjs-btn--split,
.cjs-app button.cjs-btn--split,
.cjs-app a.cjs-btn--split,
.cjs-app span.cjs-btn--split {
	padding: 0;
}

.cjs-app .cjs-btn__icon {
	padding-left: 13px;
	padding-right: 13px;
}

.cjs-app .cjs-btn__label {
	padding-left: 18px;
	padding-right: 18px;
}

.cjs-app .cjs-btn--ghost {
	padding-left: 17px;
	padding-right: 17px;
	font-weight: 600;
}

/* Small (34) — inside rows / warn bars / card heads */
.cjs-app .cjs-btn--sm,
.cjs-app button.cjs-btn--sm,
.cjs-app a.cjs-btn--sm,
.cjs-app .cjs-btn--sm .cjs-btn__icon,
.cjs-app .cjs-btn--sm .cjs-btn__label {
	height: 34px;
	min-height: 34px;
	max-height: 34px;
	font-size: 13px;
}

.cjs-app .cjs-btn--sm .cjs-btn__icon {
	padding-left: 11px;
	padding-right: 11px;
}

.cjs-app .cjs-btn--sm .cjs-btn__label {
	padding-left: 14px;
	padding-right: 14px;
}

.cjs-app .cjs-btn--danger {
	background: var(--cjs-red-tint);
	border: 1px solid var(--cjs-red-border);
	color: var(--cjs-red-text);
	font-weight: 700;
	padding-left: 18px;
	padding-right: 18px;
}

/*
 * Dialog widths — stilguide §7.
 * Must load after cjs-edit-cv.css so variant max-width beats base 440px.
 */
.cjs-dialog--form,
.cjs-dialog--ar,
.cjs-dialog--interview,
.cjs-dialog--suggest {
	max-width: 520px;
}

.cjs-dialog--dl-wait {
	max-width: 440px;
}

/*
 * Innehållsrika dialoger (mallväljare, sortera sektioner).
 * Måste slå .cjs-dialog--form { 520px } ovan — samma bredd i hub och preview.
 */
.cjs-dialog--form.cjs-tpl-picker,
.cjs-dialog--form.cjs-sort-dialog {
	max-width: min(1080px, calc(100vw - 48px));
}

.cjs-dialog--progress {
	max-width: 560px;
}