/* ═══════════════════════════════════════════════════════════
   Screenle – Unified Table & Card Design System
   Applied to: interviews, candidates, templates, coaching,
               coverletters, notifications, transactions
   ═══════════════════════════════════════════════════════════ */

/* ── Card Container ── */
.user-profile-card {
	border-radius: 14px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 24px rgba(18, 38, 63, 0.06);
	background: #fff;
}

.user-profile-card-header {
	padding: 20px 24px;
	border-bottom: 1px solid #eef2f7;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.user-profile-card-title {
	font-weight: 800;
	font-size: 1.35rem;
	color: #1e293b;
	margin-bottom: 0;
}

/* ── Table wrapper ── */
.profile-applied-job {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: auto;
	background: #fff;
}

/* ── Unified DataTable Styling ── */
.screenle-table {
	font-size: 0.88rem;
	margin-bottom: 0;
	border-collapse: separate;
	border-spacing: 0;
	width: 100% !important;
}

.screenle-table thead th {
	background: linear-gradient(135deg, #f8fafc 0%, #eef3ff 100%);
	border-bottom: 2px solid #4e73df;
	font-weight: 700;
	white-space: nowrap;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #334155;
	padding: 12px 10px;
}

.screenle-table tbody tr {
	border-bottom: 1px solid #e7edf6;
	transition: all .15s ease;
}

.screenle-table tbody tr:hover {
	background: #eef3ff;
	box-shadow: 0 2px 8px rgba(78, 115, 223, .08);
}

.screenle-table tbody td {
	vertical-align: middle;
	padding: 10px;
	color: #334155;
}

/* Cursor pointer on clickable rows */
.screenle-table tbody tr[data-action] {
	cursor: pointer;
}

/* Title column (typically col 3 or 4) emphasis */
.screenle-table .col-title {
	font-weight: 700;
	color: #1e293b;
	max-width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Action Buttons ── */
.screenle-table td:last-child .btn {
	margin: 2px 1px;
	padding: 4px 7px;
	font-size: .78rem;
	border-radius: 6px;
	transition: all .15s ease;
}

.screenle-table td:last-child .btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.action-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	align-items: center;
}

.action-btn-divider {
	width: 1px;
	height: 20px;
	background: #e2e8f0;
	margin: 0 3px;
}

/* ── Action column header icons ── */
.action-column-header {
	text-align: center;
}

.action-column {
	text-align: center;
}

/* ── Star/Favorite ── */
.screenle-table .fa-star {
	cursor: pointer;
	transition: transform .15s ease;
}

.screenle-table .fa-star:hover {
	transform: scale(1.15);
}

/* ── Source Badges ── */
.list-source-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.73rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	border: 1px solid transparent;
	text-transform: uppercase;
}

.list-source-badge--training {
	background: linear-gradient(135deg, #eef3ff, #dbeafe);
	color: #2d4fcc;
	border-color: #bfcef8;
}

.list-source-badge--company {
	background: linear-gradient(135deg, #eaf5ff, #dbeafe);
	color: #05264E;
	border-color: #a8c9f0;
}

/* ── Status badge (for transactions etc.) ── */
.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.73rem;
	font-weight: 700;
	text-transform: uppercase;
}

.status-badge--success {
	background: linear-gradient(135deg, #ecfdf5, #d1fae5);
	color: #059669;
	border: 1px solid #a7f3d0;
}

.status-badge--pending {
	background: linear-gradient(135deg, #fffbeb, #fef3c7);
	color: #d97706;
	border: 1px solid #fcd34d;
}

.status-badge--failed {
	background: linear-gradient(135deg, #fef2f2, #fee2e2);
	color: #dc2626;
	border: 1px solid #fca5a5;
}

/* ── Pagination ── */
.dataTables_paginate {
	padding-top: 1rem;
}

.dataTables_paginate .paginate_button {
	padding: 6px 12px !important;
	font-size: 0.88rem !important;
	line-height: 1.5 !important;
	margin: 0 3px !important;
	border-radius: 8px !important;
	border: 1px solid #e2e8f0 !important;
	color: #334155 !important;
	transition: all .15s ease !important;
}

.dataTables_paginate .paginate_button:hover {
	background: linear-gradient(135deg, #eef3ff, #dbeafe) !important;
	border-color: #4e73df !important;
	color: #4e73df !important;
}

.dataTables_paginate .paginate_button.current {
	background: linear-gradient(135deg, #4e73df 0%, #6366f1 100%) !important;
	border-color: #4e73df !important;
	color: #fff !important;
	font-weight: 700;
}

.dataTables_paginate .paginate_button.disabled {
	opacity: 0.45;
	cursor: default;
}

.pagination .page-link {
	width: auto;
}

/* ── DataTables info & length ── */
.dataTables_wrapper .dataTables_info {
	font-size: 0.82rem;
	color: #64748b;
	padding-top: 1rem;
}

.dataTables_wrapper .dataTables_length select {
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	padding: 4px 8px;
	font-size: 0.85rem;
}

.dataTables_wrapper .dataTables_filter input {
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	padding: 6px 12px;
	font-size: 0.85rem;
}

/* ── Toolbar Buttons ── */
.jobs-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.jobs-toolbar .theme-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 8px 14px;
	font-size: .82rem;
	border-radius: 8px;
	font-weight: 600;
	transition: all .15s ease;
}

.jobs-toolbar .theme-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}

/* ── Column icon styling ── */
.screenle-table thead th i {
	margin-right: 4px;
	font-size: 0.85rem;
}

/* ── Date column ── */
.col-date {
	white-space: nowrap;
	font-size: .82rem;
	color: #6c757d;
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.user-profile-card-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.jobs-toolbar {
		width: 100%;
	}

	.screenle-table {
		font-size: 0.82rem;
	}

	.screenle-table thead th {
		font-size: 0.72rem;
		padding: 8px 6px;
	}

	.screenle-table tbody td {
		padding: 8px 6px;
	}
}

@media (max-width: 480px) {
	.screenle-table {
		font-size: 0.75rem;
	}
}

/* ── Modal Styles (shared across answer modals) ── */
.modal-summary-header {
	background: linear-gradient(135deg, #4e73df 0%, #6366f1 100%);
	color: #fff;
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 20px;
}

.modal-summary-header h4 {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 1.25rem;
}

.modal-summary-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: .85rem;
	opacity: .92;
}

.modal-summary-meta .meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.modal-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.modal-stat-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 14px 12px;
	text-align: center;
}

.modal-stat-card i {
	font-size: 1.3rem;
	margin-bottom: 6px;
}

.modal-stat-value {
	font-size: 1.4rem;
	font-weight: 800;
	color: #1e293b;
}

.modal-stat-label {
	font-size: .78rem;
	color: #64748b;
	margin-top: 2px;
}

.score-ring-container {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}

.score-ring-svg {
	width: 120px;
	height: 120px;
}

.score-ring-bg {
	fill: none;
	stroke: #e2e8f0;
	stroke-width: 10;
}

.score-ring-fg,
.score-ring-fill {
	fill: none;
	stroke-width: 10;
	stroke-linecap: round;
	transition: stroke-dashoffset .8s ease;
}

.score-ring-text {
	font-size: 1.5rem;
	font-weight: 800;
	fill: #1e293b;
}

.score-ring-label {
	font-size: .55rem;
	fill: #64748b;
}

.modal-chart-section {
	margin-bottom: 18px;
}

.modal-chart-section h6 {
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 10px;
	font-size: .92rem;
}

.modal-chart-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.modal-chart-label {
	width: 32px;
	font-size: .78rem;
	font-weight: 600;
	color: #64748b;
	text-align: right;
	flex-shrink: 0;
}

.modal-chart-bar-bg {
	flex: 1;
	height: 18px;
	background: #f1f5f9;
	border-radius: 9px;
	overflow: hidden;
}

.modal-chart-bar {
	height: 100%;
	border-radius: 9px;
	transition: width .5s ease;
}

.modal-chart-val {
	width: 48px;
	font-size: .78rem;
	font-weight: 600;
	color: #334155;
	flex-shrink: 0;
}

.summary-qa-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.summary-qa-item {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 14px 16px;
}

.summary-qa-question {
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 6px;
	font-size: .9rem;
}

.summary-qa-answer {
	color: #475569;
	font-size: .85rem;
	line-height: 1.5;
}

.summary-qa-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.summary-qa-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .75rem;
	font-weight: 600;
}

.badge-duration {
	background: #eef2ff;
	color: #4e73df;
}

.badge-score-high {
	background: #ecfdf5;
	color: #059669;
}

.badge-score-mid {
	background: #fffbeb;
	color: #d97706;
}

.badge-score-low {
	background: #fef2f2;
	color: #dc2626;
}

.badge-sentiment {
	background: #f0f4ff;
	color: #6366f1;
}

.question-tab-header {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 14px;
}

.question-tab-header h6 {
	margin: 0;
	font-weight: 700;
	color: #1e293b;
}

.question-response-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px;
	margin: 14px 0;
}

.question-response-card h6 {
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 8px;
	font-size: .9rem;
}

.question-response-text {
	color: #475569;
	line-height: 1.6;
	font-size: .88rem;
}

.analysis-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin-top: 14px;
}

.analysis-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 14px;
}

.analysis-card label {
	font-weight: 600;
	font-size: .82rem;
	color: #1e293b;
	display: block;
	margin-bottom: 6px;
}

@media (max-width: 768px) {
	.modal-stats-row {
		grid-template-columns: repeat(2, 1fr);
	}

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