/* Dashboard styles */

.dashboard-wrapper {
	display: grid;
	grid-template-columns: 280px 1fr;
	min-height: 100vh;
	gap: 0;
}

@media (max-width: 1024px) {
	.dashboard-wrapper {
		grid-template-columns: 1fr;
	}
}

/* Sidebar */

.dashboard-sidebar {
	background-color: var(--color-card);
	border-right: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	max-height: 100vh;
	overflow-y: auto;
	padding: var(--space-lg);
}

.dashboard-sidebar h3 {
	font-size: var(--font-size-sm);
	font-weight: 700;
	text-transform: uppercase;
	color: #64748B;
	margin-bottom: var(--space-md);
	margin-top: var(--space-lg);
}

.dashboard-sidebar h3:first-child {
	margin-top: 0;
}

.dashboard-nav ul {
	list-style: none;
}

.dashboard-nav li {
	margin: 0;
}

.dashboard-nav a {
	display: block;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	color: var(--color-text);
	transition: all var(--transition-fast);
	border-left: 3px solid transparent;
	margin-bottom: var(--space-xs);
}

.dashboard-nav a:hover {
	background-color: var(--color-surface);
	color: var(--color-primary);
}

.dashboard-nav a.active {
	background-image: linear-gradient(90deg, rgba(30, 64, 175, 0.12), rgba(30, 64, 175, 0.04));
	color: var(--color-primary);
	border-left-color: var(--color-primary);
	font-weight: 700;
}

@media (max-width: 1024px) {
	.dashboard-sidebar {
		display: none;
	}

	.dashboard-sidebar.mobile-open {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		max-height: 100vh;
		border-right: none;
		border-bottom: none;
	}
}

/* Main content */

.dashboard-main {
	padding: var(--space-xl);
	background-color: var(--color-bg);
}

@media (max-width: 768px) {
	.dashboard-main {
		padding: var(--space-lg);
	}
}

/* Dashboard header */

.dashboard-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-xl);
	gap: var(--space-lg);
}

.dashboard-header h1 {
	font-size: var(--font-size-2xl);
	margin: 0;
}

.dashboard-header-actions {
	display: flex;
	gap: var(--space-md);
}

@media (max-width: 768px) {
	.dashboard-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.dashboard-header-actions {
		width: 100%;
	}

	.dashboard-header-actions .btn {
		flex: 1;
	}
}

/* Sections */

.dashboard-section {
	margin-bottom: var(--space-2xl);
}

.dashboard-section-title {
	font-size: var(--font-size-xl);
	font-weight: 700;
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border-strong);
}

/* Candidate-search filter row */
.cs-form {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr auto;
	gap: var(--space-sm);
	align-items: end;
}
.cs-form .btn { height: fit-content; }
@media (max-width: 720px) {
	.cs-form { grid-template-columns: 1fr 1fr; }
	.cs-form .btn { grid-column: 1 / -1; }
}

/* Short "what you can do here" intro under a section title */
.dashboard-section-intro {
	margin: calc(-1 * var(--space-sm)) 0 var(--space-lg);
	color: var(--color-muted);
	font-size: var(--font-size-sm);
	max-width: 70ch;
}

/* Section header row: title on the left, a primary CTA on the right */
.dashboard-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
	margin-bottom: var(--space-lg);
}
.dashboard-section-head .dashboard-section-title {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Prominent "Create CV" CTA */
.btn-cta-cv {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--gradient-primary, linear-gradient(95deg, #1E40AF, #2563EB 45%, #06B6D4));
	color: #fff;
	border: 0;
	box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-cta-cv:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(37, 99, 235, 0.38);
	color: #fff;
}
.btn-cta-cv .dtuk-icon { color: #fff; }
.btn-cta-cv.btn-large { padding: 15px 30px; font-size: var(--font-size-md); }

/* Tips card (shown in dashboards) */
.dashboard-tips {
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-lg);
	background: linear-gradient(180deg, rgba(37, 99, 235, 0.05), rgba(6, 182, 212, 0.04));
	padding: var(--space-lg);
}
.dashboard-tips-head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: var(--font-size-md);
	margin-bottom: var(--space-md);
	color: var(--color-text, #0f172a);
}
.dashboard-tips-head .dtuk-icon { color: var(--color-primary); flex: none; }
.dashboard-tips-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.dashboard-tips-list li {
	position: relative;
	padding-left: 28px;
	line-height: 1.5;
	color: var(--color-muted, #475569);
}
.dashboard-tips-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--color-primary);
	border-radius: 999px;
}

/* Cards grid */

.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-lg);
}

@media (max-width: 768px) {
	.cards-grid {
		grid-template-columns: 1fr;
	}
}

/* Stats cards */

.stat-card {
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	text-align: center;
}

.stat-card-value {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: var(--space-sm);
}

.stat-card-label {
	font-size: var(--font-size-sm);
	color: #64748B;
}

/* Tables in dashboard */

.dashboard-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--color-card);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.dashboard-table thead {
	background-color: var(--color-bg);
}

.dashboard-table th {
	padding: var(--space-md);
	text-align: left;
	font-weight: 600;
	border-bottom: 1px solid var(--color-border);
}

.dashboard-table td {
	padding: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.dashboard-table tbody tr:hover {
	background-color: rgba(30, 64, 175, 0.05);
}

.dashboard-table tbody tr:last-child td {
	border-bottom: none;
}
.cv-actions { white-space: nowrap; display: flex; gap: 8px; }

/* AI recruitment tool tiles */
.rec-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: var(--space-lg); }
.rec-tool {
	position: relative; text-align: left; display: flex; flex-direction: column; gap: 8px;
	padding: 16px 18px; border: 1px solid var(--color-border); border-radius: 16px;
	background: var(--color-card); cursor: pointer; overflow: hidden;
	box-shadow: 0 1px 2px rgba(16,24,40,.04);
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.rec-tool:hover { border-color: #D3DCEE; transform: translateY(-3px); box-shadow: 0 18px 38px -22px rgba(30,64,175,.4); }
.rec-tool.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37,99,235,.18); background: rgba(37,99,235,.04); }
.rec-tool.active::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(95deg,#1E40AF,#EAB308 60%,#CE1126); }
.rec-tool-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; color: var(--color-primary); background: linear-gradient(135deg, rgba(30,64,175,.10), rgba(234,179,8,.12)); }
.rec-tool-title { font-weight: 800; }
.rec-tool-desc { font-size: var(--font-size-sm); color: var(--color-muted); line-height: 1.4; }
@media (max-width: 720px) { .rec-tools { grid-template-columns: 1fr; } }

/* Traffic-sources bars (Statistics) */
.stats-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stats-sources li { display: grid; grid-template-columns: 140px 1fr 44px; align-items: center; gap: 12px; }
.stats-sources .src-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-sources .src-bar { background: var(--color-bg-alt, #eef1f6); border-radius: 999px; height: 8px; overflow: hidden; }
.stats-sources .src-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #2563EB, #06B6D4); border-radius: 999px; }
.stats-sources .src-count { text-align: right; color: var(--color-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .stats-sources li { grid-template-columns: 100px 1fr 40px; } }

/* Pro upsell card */
.upsell-card {
	position: relative;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-xl);
	background: linear-gradient(160deg, #0E2A5A 0%, #14233F 100%);
	color: #fff;
	padding: var(--space-xl);
	overflow: hidden;
}
.upsell-card::after {
	content: ""; position: absolute; top: -40%; right: -10%;
	width: 320px; height: 320px; border-radius: 50%;
	background: radial-gradient(circle, rgba(6,182,212,0.30), transparent 70%);
	pointer-events: none;
}
.upsell-badge {
	display: inline-flex; align-items: center; gap: 6px;
	background: linear-gradient(95deg, #F59E0B, #FBBF24);
	color: #1f2937; font-weight: 800; font-size: 12px; letter-spacing: 0.08em;
	padding: 5px 12px; border-radius: 999px; margin-bottom: var(--space-md);
}
.upsell-badge .dtuk-icon { color: #1f2937; }
.upsell-card h2 { color: #fff; font-size: var(--font-size-xl); margin: 0 0 8px; }
.upsell-lead { color: rgba(255,255,255,0.82); margin: 0 0 var(--space-lg); max-width: 60ch; }
.upsell-benefits { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: 10px; }
.upsell-benefits li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.92); }
.upsell-benefits .dtuk-icon { color: #34D399; flex: none; }
.upsell-foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-md); flex-wrap: wrap;
	border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-lg);
}
.upsell-price strong { font-size: 1.8rem; font-weight: 800; }
.upsell-price span { color: rgba(255,255,255,0.7); font-size: var(--font-size-sm); margin-left: 4px; }

/* Mobile: turn each table row into a clean card (no cramped columns) */
@media (max-width: 600px) {
	.dashboard-table { box-shadow: none; background: transparent; }
	.dashboard-table thead { display: none; }
	.dashboard-table tbody tr {
		display: block;
		background: var(--color-card);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
		padding: var(--space-sm) var(--space-md);
		margin-bottom: var(--space-md);
	}
	.dashboard-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-md);
		padding: 8px 0;
		border-bottom: 1px solid var(--color-border-soft, #eef1f6);
		white-space: normal;
	}
	.dashboard-table tbody tr td:last-child { border-bottom: none; }
	.dashboard-table td::before {
		content: attr(data-label);
		font-weight: 700;
		font-size: var(--font-size-sm);
		color: var(--color-muted);
		flex: none;
	}
	.cv-actions { justify-content: flex-end; flex-wrap: wrap; }
}

/* Empty state */

.empty-state {
	text-align: center;
	padding: var(--space-2xl);
	background-color: var(--color-card);
	border-radius: var(--radius-lg);
	border: 1px dashed var(--color-border);
}

.empty-state-icon {
	font-size: 48px;
	margin-bottom: var(--space-md);
}

.empty-state-title {
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin-bottom: var(--space-sm);
}

.empty-state-text {
	color: #64748B;
	margin-bottom: var(--space-lg);
}

/* Loading state */

.loading-card {
	background-color: var(--color-card);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.loading-card-title {
	height: 24px;
	background: linear-gradient(90deg, var(--color-bg) 25%, #e0e7ff 50%, var(--color-bg) 75%);
	background-size: 200% 100%;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-md);
	animation: loading 1.5s infinite;
}

.loading-card-content {
	height: 60px;
	background: linear-gradient(90deg, var(--color-bg) 25%, #e0e7ff 50%, var(--color-bg) 75%);
	background-size: 200% 100%;
	border-radius: var(--radius-md);
	animation: loading 1.5s infinite;
}

/* Mobile menu toggle */

.dashboard-menu-toggle {
	display: none;
	position: fixed;
	bottom: 18px;
	right: 18px;
	z-index: 9997;
	padding: 13px 22px;
	gap: 8px;
	background-image: var(--gradient-primary, linear-gradient(95deg, #1E40AF, #2563EB));
	background-color: var(--color-primary);
	color: white;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	box-shadow: 0 10px 26px rgba(30, 64, 175, 0.45);
}
.dashboard-menu-toggle span { font-size: 1.4rem; line-height: 1; }
.dashboard-menu-toggle::after { content: "Meniu"; }
.dashboard-menu-toggle:active { transform: scale(0.97); }

@media (max-width: 1024px) {
	.dashboard-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Sticky CTA (mobile) */

.dashboard-sticky-cta {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--color-card);
	border-top: 1px solid var(--color-border);
	padding: var(--space-md);
	z-index: 100;
}

@media (max-width: 768px) {
	.dashboard-sticky-cta {
		display: block;
	}

	.dashboard-main {
		padding-bottom: 80px;
	}
}

.dashboard-sticky-cta .btn {
	width: 100%;
}

/* ============================================================================
   BILLING / SUBSCRIPTION SECTION
   ============================================================================ */

.subscription-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	margin: 2rem 0;
	padding: 2rem;
	background-color: var(--color-background-secondary);
	border-radius: 8px;
	border: 1px solid var(--color-border);
}

.info-block {
	display: flex;
	flex-direction: column;
}

.info-block label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-secondary);
	margin-bottom: 0.5rem;
}

.plan-name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 0.5rem;
}

.info-block p {
	margin: 0;
	font-size: 1rem;
	color: var(--color-text-primary);
}

.subscription-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border);
}

.subscription-actions .btn {
	flex: 1;
}

@media (max-width: 768px) {
	.subscription-info {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.subscription-actions {
		flex-direction: column;
	}

	.subscription-actions .btn {
		width: 100%;
	}
}

/* ── Company / self-employed profile editor ───────────────────── */

.company-profile { display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: flex-start; }
.cp-logo { width: 140px; flex-shrink: 0; text-align: center; }
.cp-logo-img { width: 120px; height: 120px; object-fit: cover; border-radius: 16px; border: 1px solid var(--color-border, #E2E8F0); background: #fff; }
.cp-logo-placeholder {
	width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;
	font-size: 2.6rem; border-radius: 16px; border: 1px dashed var(--color-border, #E2E8F0); background: #F8FAFC;
}
.cp-logo-btn { margin-top: 10px; display: inline-block; cursor: pointer; }
.cp-fields { flex: 1; min-width: 260px; }
.cp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 600px) { .cp-grid2 { grid-template-columns: 1fr; } }
.cp-social-title { font-size: 0.95rem; font-weight: 700; margin: var(--space-md) 0 2px; padding-top: var(--space-md); border-top: 1px solid var(--color-border); }

/* Service-provider dashboard list */
.dtuk-list { display: flex; flex-direction: column; gap: 12px; }
.dtuk-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dtuk-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.company-profile .form-group { margin-bottom: var(--space-md); }
.company-profile .form-group label { display:block; font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; }

/* Tools section in the dashboard (card grid) + delete buttons */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;margin-top:1rem}
.tools-grid .tool-card{position:relative;display:flex;flex-direction:column;gap:.45rem;background:#fff;border:1px solid var(--color-border,#E5E9F2);border-radius:18px;padding:1.5rem 1.35rem 1.6rem;text-decoration:none;color:inherit;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 26px -16px rgba(16,24,40,.18);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tools-grid .tool-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(95deg,#1E40AF 0%,#1E40AF 34%,#EAB308 60%,#CE1126 100%);opacity:0;transition:opacity .18s ease}
.tools-grid .tool-card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(16,24,40,.05),0 22px 44px -22px rgba(30,64,175,.35);border-color:#D3DCEE}
.tools-grid .tool-card:hover::before{opacity:1}
.tools-grid .tool-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;font-size:1.55rem;background:linear-gradient(135deg,rgba(30,64,175,.10),rgba(234,179,8,.12));margin-bottom:.3rem;transition:transform .18s ease}
.tools-grid .tool-card:hover .tool-ico{transform:scale(1.06)}
.tools-grid .tool-title{font-weight:800;font-size:1.05rem;line-height:1.25}
.tools-grid .tool-desc{font-size:.88rem;color:var(--color-muted,#64748B);line-height:1.45;flex:1}
.tools-grid .tool-card::after{content:"→";margin-top:.5rem;font-weight:700;color:var(--color-primary,#1E40AF);opacity:.55;transition:transform .18s ease,opacity .18s ease}
.tools-grid .tool-card:hover::after{transform:translateX(4px);opacity:1}
.btn-link-delete{background:none;border:1px solid transparent;color:#DC2626}
.btn-link-delete:hover{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}

/* Plan-status card on the dashboard overview (company/service). */
.plan-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-radius:14px;padding:14px 18px;margin-bottom:20px}
.plan-card-free{border:1px solid #FDE68A;background:linear-gradient(180deg,#FFFBEB 0%,#FEF9F0 100%)}
.plan-card-paid{border:1px solid #BBF7D0;background:#F0FDF4}
.plan-card-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:220px}
.plan-card-main strong{font-size:1rem}
.plan-card .btn{flex:0 0 auto}
@media (max-width:600px){.plan-card .btn{width:100%}}

/* Candidate-match PDF upload dropzone (AI recruitment tools). */
.rec-upload{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
	border:2px dashed #CBD5E1;border-radius:14px;padding:26px 20px;cursor:pointer;
	background:#F8FAFC;transition:border-color .15s,background .15s}
.rec-upload:hover{border-color:var(--color-primary);background:#F1F5F9}
.rec-upload.drag{border-color:var(--color-primary);background:rgba(37,99,235,.06)}
.rec-upload-ico{color:var(--color-primary)}
.rec-upload-title{font-weight:700}
.rec-upload-hint{font-size:var(--font-size-sm);color:var(--color-muted);max-width:420px}
.rec-upload-status{margin-top:4px;font-weight:600}
.rec-paste-toggle{display:inline-block;margin-top:10px;background:none;border:none;
	color:var(--color-primary);font-size:var(--font-size-sm);cursor:pointer;text-decoration:underline;padding:0}
.rec-paste-toggle:hover{opacity:.8}