/* JobStart – menu badge + interactive dashboard demo (employer page). */

/* Menu badge */
.cj-nav__emp { position: relative; gap: 8px; }
.cj-badge { display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--cj-lime); color: #1a2e05; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; animation: cj-pulse 2.4s ease-out infinite; }
@keyframes cj-pulse { 0% { box-shadow: 0 0 0 0 rgba(163, 230, 53, .55); } 70% { box-shadow: 0 0 0 8px rgba(163, 230, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0); } }
@media (prefers-reduced-motion: reduce) { .cj-badge, .cj-demo__pane { animation: none; } }

/* Demo layout */
.cj-demo { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.cj-demo > input { position: absolute; opacity: 0; pointer-events: none; }
.cj-demo__tabs { display: grid; gap: 8px; }
.cj-demo__tabs label { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--cj-line); background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cj-demo__tabs label:hover { transform: translateX(3px); border-color: #c7d2fe; }
.cj-demo__tabs label > .cj-ico { width: 22px; height: 22px; color: var(--cj-blue); flex: none; }
.cj-demo__tabs span { display: flex; flex-direction: column; line-height: 1.3; }
.cj-demo__tabs small { color: var(--cj-muted); font-size: 13px; }
#cj-demo-1:checked ~ .cj-demo__tabs label[for=cj-demo-1],
#cj-demo-2:checked ~ .cj-demo__tabs label[for=cj-demo-2],
#cj-demo-3:checked ~ .cj-demo__tabs label[for=cj-demo-3],
#cj-demo-4:checked ~ .cj-demo__tabs label[for=cj-demo-4] { border-color: var(--cj-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15), var(--cj-shadow); background: linear-gradient(135deg, #eef2ff, #fff); }
#cj-demo-1:focus-visible ~ .cj-demo__tabs label[for=cj-demo-1],
#cj-demo-2:focus-visible ~ .cj-demo__tabs label[for=cj-demo-2],
#cj-demo-3:focus-visible ~ .cj-demo__tabs label[for=cj-demo-3],
#cj-demo-4:focus-visible ~ .cj-demo__tabs label[for=cj-demo-4] { outline: 3px solid rgba(37, 99, 235, .45); }

.cj-demo__win { background: #fff; border-radius: 18px; border: 1px solid var(--cj-line); box-shadow: 0 40px 80px -40px rgba(15, 23, 42, .45); overflow: hidden; min-height: 430px; }
.cj-demo__tag { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: #fef3c7; color: #92400e; }
.cj-demo__pane { display: none; padding: 22px; animation: cj-fade .25s ease; }
@keyframes cj-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#cj-demo-1:checked ~ .cj-demo__win .cj-demo__pane--1,
#cj-demo-2:checked ~ .cj-demo__win .cj-demo__pane--2,
#cj-demo-3:checked ~ .cj-demo__win .cj-demo__pane--3,
#cj-demo-4:checked ~ .cj-demo__win .cj-demo__pane--4 { display: block; }
.cj-demo-av { width: 44px; height: 44px; flex: none; border-radius: 50%; }

/* 1 – list */
.cj-demo__toolbar { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.cj-demo__toolbar span { padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--cj-muted); border: 1px solid var(--cj-line); }
.cj-demo__toolbar span.is-on { background: var(--cj-navy); color: #fff; border-color: var(--cj-navy); }
.cj-demo__toolbar em { font-style: normal; opacity: .7; margin-left: 3px; }
.cj-demo__list { list-style: none; margin: 0; padding: 0; }
.cj-demo__list li { display: flex; align-items: center; gap: 14px; padding: 11px 4px; border-top: 1px solid var(--cj-line); }
.cj-demo__list li:first-child { border-top: 0; }
.cj-demo__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cj-demo__who small { color: var(--cj-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cj-demo__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; color: var(--cj-muted); }

/* 2 – contact steps */
.cj-demo__person { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--cj-tint); margin-bottom: 14px; }
.cj-demo__person div { flex: 1; display: flex; flex-direction: column; }
.cj-demo__person small { color: var(--cj-muted); }
.cj-demo__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.cj-demo__steps span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--cj-line); font-size: 14px; }
.cj-demo__steps i { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cj-tint); color: var(--cj-muted); font-style: normal; font-weight: 800; font-size: 13px; }
.cj-demo__steps i .cj-ico { width: 15px; height: 15px; }
.cj-demo__steps small { font-size: 12px; color: var(--cj-muted); }
.cj-demo__steps .is-done i { background: #16a34a; color: #fff; }
.cj-demo__steps .is-done small { color: #15803d; }
.cj-demo__steps .is-now { border-color: var(--cj-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.cj-demo__tl { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--cj-line); display: grid; gap: 12px; }
.cj-demo__tl li { position: relative; display: flex; flex-direction: column; font-size: 14px; }
.cj-demo__tl li::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid; background: #fff; }
.cj-demo__tl small { color: var(--cj-muted); }
.cj-demo__tl .is-amber::before { border-color: #f59e0b; }
.cj-demo__tl .is-violet::before { border-color: #7c3aed; }
.cj-demo__tl .is-blue::before { border-color: #2563eb; }
.cj-demo__tl .is-green::before { border-color: #16a34a; }

/* 3 – calendar week */
.cj-demo__cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.cj-demo__day { display: flex; flex-direction: column; gap: 5px; min-height: 260px; padding: 10px 8px; border-radius: 12px; border: 1px solid var(--cj-line); background: #fff; }
.cj-demo__day > b { font-size: 13px; color: var(--cj-muted); margin-bottom: 4px; }
.cj-demo__day.is-today { border-color: var(--cj-blue); background: #f8faff; }
.cj-demo__day.is-today > b { color: var(--cj-blue); }
.cj-demo__day .cj-cal__ev { white-space: normal; font-size: 12px; line-height: 1.35; }
.cj-demo__add { margin-top: auto; align-self: center; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; border: 1px dashed #c7d2fe; color: var(--cj-blue); font-weight: 800; }

/* 4 – e-mail */
.cj-demo__mail { display: grid; gap: 14px; }
.cj-demo__mailbody { padding: 16px 18px; border: 1px solid var(--cj-line); border-radius: 12px; font-size: 15px; line-height: 1.6; }
.cj-demo__mailbody p { margin: 0 0 10px !important; }
.cj-demo__when { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #fffbeb; font-weight: 700; }
.cj-demo__when .cj-ico { width: 16px; height: 16px; color: #d97706; }
.cj-demo__send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cj-demo__send small { color: var(--cj-muted); }

@media (max-width: 1000px) {
	.cj-demo { grid-template-columns: minmax(0, 1fr); }
	.cj-demo__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cj-demo__tabs small { display: none; }
}
@media (max-width: 640px) {
	.cj-demo__tabs { grid-template-columns: 1fr 1fr; }
	.cj-demo__steps { grid-template-columns: 1fr 1fr; }
	.cj-demo__cal { grid-template-columns: 1fr; }
	.cj-demo__day { min-height: 0; }
	.cj-demo__add, .cj-demo__meta time { display: none; }
}