/* ==========================================================================
	Design Tokens
	========================================================================== */
:root {
	--brand-green: #61ce70;
	--danger-red: #dc3545;
	--text-secondary: #6c757d;
	--text-muted: #9ca3af;
	--text-gray: #6b7280;
	--text-light: #8e8e8e;
	--text-white: #ffffff;
	--surface: #ffffff;
	--surface-alt: #fdfdfd;
	--surface-light: #fbfbfb;
	--page-bg: #f5f5f5;
	--border-default: #e8e8e8;
	--border-medium: #e1e1e1;
	--border-gray: #d9d9d9;
	--dark-surface: #303030;
	--dark-bg: #282933;
	--dark-text: #2a3547;
	--transparent: transparent;
	--black: #000000;
}

/* ==========================================================================
	Base Elements
	========================================================================== */
body {
	color: var(--text-light);
	line-height: 1.6;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	overflow-x: hidden;
	margin: 0px;
	padding: 0px;
	background: var(--page-bg);
	width: 100%;
}

a {
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	outline: none;
	text-decoration: none;
	color: var(--black);
}

a:hover,
a:focus {
	outline: none;
	text-decoration: none;
	color: var(--text-secondary);
}

p {
	margin-bottom: 8px;
}

p:last-child {
	margin-bottom: 0;
}

ul {
	margin: 0px;
	padding: 0px;
}

ul li {
	list-style: none;
}

strong,
b {
	font-weight: 700;
	color: var(--black);
}

address {
	margin-bottom: 0;
}

figure {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--black);
}

textarea:focus,
input:focus {
	outline: none;
}

html {
	scroll-behavior: smooth;
}

section {
	scroll-margin-top: 70px;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
	color: var(--brand-green);
}

.viewnavbar {
	padding: 30px 60px;
}

button {
	border: none;
}

button:hover {
	background: var(--brand-green) !important;
	color: var(--surface) !important;
}

button:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
	Buttons
	========================================================================== */
.btn {
	padding: 5px 12px;
}

.modal-footer .btn {
	padding: 10px 12px;
}

.btn-outline-primary {
	--bs-btn-color: var(--brand-green);
	--bs-btn-border-color: var(--brand-green);
	border: 1px solid var(--brand-green) !important;
}

.btn:hover {
	background-color: var(--brand-green);
	border-color: var(--brand-green);
}

/* ==========================================================================
	Modals
	========================================================================== */
.modal-content {
	padding: 0;
	border-radius: 16px;
	border: 1px solid var(--border-default);
	overflow: hidden;
}

.modern-modal {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.modern-modal-header {
	background: linear-gradient(135deg, var(--surface-light) 0%, var(--surface) 100%);
	border-bottom: 1px solid var(--border-default);
	padding: 20px 24px;
}

.modal-title-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}

.modal-title-wrapper i {
	color: var(--brand-green);
	font-size: 20px;
}

.modern-close-btn {
	opacity: 0.6;
	transition: all 0.2s ease;
}

.modern-close-btn:hover {
	opacity: 1;
	transform: rotate(90deg);
}

.modern-modal-body {
	padding: 24px;
}

.edit-message-wrapper .form-label {
	font-weight: 600;
	color: var(--text-gray);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}

.modern-textarea {
	border: 2px solid var(--border-default);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.6;
	transition: all 0.2s ease;
	resize: vertical;
	min-height: 120px;
}

.modern-textarea:focus {
	border-color: var(--brand-green);
	box-shadow: 0 0 0 4px rgba(97, 206, 112, 0.1);
	outline: none;
}

.modern-modal-footer {
	background: var(--page-bg);
	border-top: 1px solid var(--border-default);
	padding: 16px 24px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.modern-btn-cancel {
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 500;
	transition: all 0.2s ease;
}

.modern-btn-cancel:hover {
	background: var(--border-default);
}

.modern-btn-save {
	padding: 10px 24px;
	border-radius: 8px;
	font-weight: 500;
	background: var(--brand-green);
	border: none;
	color: var(--text-white) !important;
	transition: all 0.2s ease;
}

.modern-btn-save:hover {
	background: #4ab85f;
	color: var(--text-white) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(97, 206, 112, 0.3);
}

.modern-btn-save i {
	color: var(--text-white);
}

.swal2-icon.swal2-success .swal2-success-ring {
	border-color: rgba(97, 206, 112, 0.3) !important;
}

/* ==========================================================================
	Design Brief
	========================================================================== */
.modern-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1.25rem;
	background: var(--surface);
	color: var(--text-gray);
	border: 1px solid var(--border-default);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-back-btn:hover {
	background: var(--brand-green);
	color: var(--text-white);
	border-color: var(--brand-green);
	transform: translateX(-4px);
}

.modern-back-btn i {
	font-size: 13px;
	transition: transform 0.3s ease;
}

.modern-back-btn:hover i {
	transform: translateX(-3px);
}

.modern-brief-unified {
	background: var(--surface);
	border: 1px solid var(--border-default);
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.3s ease;
	overflow: hidden;
}

.modern-brief-unified:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.brief-header-section {
	padding: 2rem;
	border-bottom: 1px solid var(--border-default);
}

.modern-brief-title {
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--dark-text);
	margin: 0;
	line-height: 1.3;
}

.modern-status-badge {
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 0.5rem;
}

.modern-status-badge i {
	font-size: 0.625rem;
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

.modern-brief-meta {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}

.meta-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--surface-light);
	border: 1px solid var(--border-default);
	border-radius: 12px;
	min-width: 180px;
}

.meta-item i {
	font-size: 1.25rem;
	color: var(--brand-green);
	margin-top: 0.25rem;
}

.meta-label {
	font-size: 0.75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.meta-value {
	font-size: 0.9375rem;
	color: var(--dark-text);
	font-weight: 600;
}

.brief-content-section {
	padding: 2rem;
	border-bottom: 1px solid var(--border-default);
}

.brief-attachments-section {
	padding: 2rem;
}

.section-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border-default);
	font-size: 1rem;
	font-weight: 600;
	color: var(--dark-text);
}

.section-divider i {
	color: var(--brand-green);
	font-size: 1.125rem;
}

.attachment-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	padding: 0 0.5rem;
	background: var(--brand-green);
	color: var(--text-white);
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	margin-left: auto;
}

.brief-content-text {
	color: var(--text-gray);
	font-size: 0.9375rem;
	line-height: 1.75;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.empty-state-inline {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem;
	background: var(--surface-light);
	border: 1px dashed var(--border-default);
	border-radius: 10px;
	color: var(--text-muted);
}

.empty-state-inline i {
	font-size: 1.5rem;
	opacity: 0.6;
}

.empty-state-inline p {
	margin: 0;
	font-size: 0.9375rem;
}

.modern-attachments-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}

.modern-attachment-item {
	position: relative;
	background: var(--surface-light);
	border: 1px solid var(--border-default);
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-attachment-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border-color: var(--brand-green);
}

.attachment-preview {
	position: relative;
	width: 100%;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface);
	overflow: hidden;
}

.image-preview {
	cursor: pointer;
}

.attachment-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.file-preview img {
	max-width: 80px;
	max-height: 80px;
	object-fit: contain;
}

.image-preview:hover img {
	transform: scale(1.1);
}

.preview-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.image-preview:hover .preview-overlay {
	opacity: 1;
}

.preview-overlay i {
	color: var(--text-white);
	font-size: 2rem;
}

.attachment-info {
	padding: 1rem;
	background: var(--surface);
}

.attachment-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--dark-text);
	margin-bottom: 0.375rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.attachment-size {
	font-size: 0.75rem;
	color: var(--text-muted);
	font-weight: 500;
}

.attachment-download-btn {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface);
	color: var(--brand-green);
	border-radius: 50%;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 10;
}

.modern-attachment-item:hover .attachment-download-btn {
	opacity: 1;
	transform: scale(1);
}

.attachment-download-btn:hover {
	background: var(--brand-green);
	color: var(--text-white);
	transform: scale(1.1);
}

.attachment-download-btn i {
	font-size: 0.875rem;
}

@media (max-width: 992px) {

	.brief-header-section,
	.brief-content-section,
	.brief-attachments-section {
		padding: 1.5rem;
	}

	.modern-brief-title {
		font-size: 1.5rem;
	}

	.modern-brief-meta {
		gap: 1rem;
	}

	.meta-item {
		min-width: 150px;
		padding: 0.875rem;
	}

	.modern-attachments-grid {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 1rem;
	}
}

@media (max-width: 768px) {

	.brief-header-section,
	.brief-content-section,
	.brief-attachments-section {
		padding: 1.25rem;
	}

	.modern-brief-title {
		font-size: 1.25rem;
	}

	.modern-brief-meta {
		width: 100%;
	}

	.meta-item {
		flex: 1;
		min-width: 140px;
	}

	.modern-attachments-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.attachment-preview {
		height: 140px;
	}
}

/* ==========================================================================
	User Menu / Dropdown
	========================================================================== */
.modern-user-dropdown {
	position: relative;
}

.modern-user-btn {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.modern-user-btn:hover {
	opacity: 0.85;
}

.modern-user-btn.show {
	opacity: 1;
}

.modern-user-dropdown .user-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--brand-green);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-white);
	font-size: 0.875rem;
}

.dropdown-arrow {
	display: none;
}

.modern-dropdown-menu {
	min-width: 280px;
	padding: 0;
	margin-top: 0.75rem !important;
	border: 1px solid var(--border-default);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	animation: dropdownSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownSlideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dropdown-header-section {
	padding: 1.25rem 1rem;
	background: var(--surface-light);
	border-bottom: 1px solid var(--border-default);
}

.user-info-header {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.user-avatar-large {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--brand-green);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-white);
	font-size: 1.25rem;
	flex-shrink: 0;
}

.user-details {
	flex: 1;
	min-width: 0;
}

.user-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--dark-text);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.user-role {
	font-size: 0.75rem;
	color: var(--text-muted);
	font-weight: 500;
}

.dropdown-menu-items {
	padding: 0.5rem;
}

.modern-dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.75rem 1rem;
	color: var(--text-gray);
	text-decoration: none;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 500;
	transition: all 0.2s ease;
	margin-bottom: 0.25rem;
}

.modern-dropdown-item:last-child {
	margin-bottom: 0;
}

.modern-dropdown-item i {
	font-size: 1.125rem;
	color: var(--text-muted);
	width: 1.25rem;
	text-align: center;
}

.modern-dropdown-item:hover {
	background: var(--surface-light);
	color: var(--brand-green);
	transform: translateX(4px);
}

.modern-dropdown-item:active {
	transform: translateX(4px) scale(0.98);
}

.modern-dropdown-menu .dropdown-divider {
	margin: 0.5rem 0;
	border-top: 1px solid var(--border-default);
	opacity: 1;
}

.dropdown-footer-section {
	padding: 0.75rem;
	background: var(--surface-light);
}

.modern-logout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.75rem 1rem;
	background: var(--brand-green);
	color: var(--text-white);
	text-decoration: none;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 8px rgba(97, 206, 112, 0.2);
}

.modern-logout-btn i {
	font-size: 1rem;
}

.modern-logout-btn:hover {
	background: #4fb85f;
	color: var(--text-white);
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(97, 206, 112, 0.3);
}

.modern-logout-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(97, 206, 112, 0.2);
}

.modern-user-dropdown .dashuser,
.modern-user-dropdown .userbutton {
	display: none;
}

@media (max-width: 768px) {
	.modern-dropdown-menu {
		min-width: 260px;
	}

	.dropdown-header-section {
		padding: 1rem 0.875rem;
	}

	.user-avatar-large {
		width: 42px;
		height: 42px;
		font-size: 1.125rem;
	}

	.user-name {
		font-size: 0.875rem;
	}

	.modern-dropdown-item {
		padding: 0.625rem 0.875rem;
		font-size: 0.875rem;
	}
}

/* ==========================================================================
	Preloader & Spinners
	========================================================================== */
#preloader {
	position: fixed;
	z-index: 9999;
	background-color: var(--surface);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dots {
	width: 56px;
	height: 26.9px;
	margin: 30px auto;
	text-align: center;
	background:
		radial-gradient(circle closest-side, var(--brand-green) 90%, #0000) 0% 50%,
		radial-gradient(circle closest-side, var(--brand-green) 90%, #0000) 50% 50%,
		radial-gradient(circle closest-side, var(--brand-green) 90%, #0000) 100% 50%;
	background-size: calc(100%/3) 13.4px;
	background-repeat: no-repeat;
	animation: dots-7ar3yq 1s infinite linear;
}

@keyframes dots-7ar3yq {
	20% {
		background-position: 0% 0%, 50% 50%, 100% 50%;
	}

	40% {
		background-position: 0% 100%, 50% 0%, 100% 50%;
	}

	60% {
		background-position: 0% 50%, 50% 100%, 100% 0%;
	}

	80% {
		background-position: 0% 50%, 50% 50%, 100% 100%;
	}
}

#spinner {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 9px solid;
	border-color: var(--border-default);
	border-right-color: var(--brand-green);
	animation: spinner-d3wgkg 1s infinite linear;
}

@keyframes spinner-d3wgkg {
	to {
		transform: rotate(1turn);
	}
}

.btn-primary {
	background: var(--brand-green)color: var(--text-white);
}

.form-control:focus {
	border: 1px solid var(--brand-green);
	border-radius: 5px;
	outline: 0px !important;
	box-shadow: none !important;
	transition: all 0.15s ease-in-out;
}

.delete-now {
	background: var(--danger-red);
	padding: 8px 10px;
	color: var(--text-white);
	border-radius: 8px;
}

.delete-now:hover {
	color: var(--text-white);
	background: var(--dark-bg);
}

body.admin-bar .scrl {
	top: 32px;
}

/* ==========================================================================
	Layout Helpers
	========================================================================== */
.logo {
	font-size: 20px;
	font-weight: 500;
	line-height: 20px;
}

.container {
	max-width: 1400px;
}

.hide-md {
	display: block !important;
}

.show-md {
	display: none !important;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
	Header & Main Navigation
	========================================================================== */
.main-header.modern-nav {
	width: 100%;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1000;
	position: sticky;
	top: 0;
	animation: fadeInDown 0.6s ease-out;
}

.main-header.modern-nav .nav-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	gap: 2rem;
}

.main-header.modern-nav .logo-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.main-header.modern-nav .logo-link {
	display: flex;
	align-items: center;
	transition: transform 0.3s ease;
}

.main-header.modern-nav .logo-link:hover {
	transform: scale(1.05);
}

.main-header.modern-nav .logo-img {
	transition: filter 0.3s ease;
}

.main-header.modern-nav .menu-toggle {
	display: none;
	font-size: 1.5rem;
	color: var(--black);
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.main-header.modern-nav .menu-toggle:hover {
	background: var(--brand-green);
	color: var(--text-white);
}

/* ==========================================
   Modern Archive Page Styles
   ========================================== */

/* Archive Header Card */
.modern-archive-header {
	background: linear-gradient(135deg, var(--surface) 0%, var(--surface-light) 100%);
	border: 1px solid var(--border-default);
	border-radius: 16px;
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.archive-header-content {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.archive-icon-wrapper {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--brand-green) 0%, #4fb85f 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-white);
	font-size: 1.75rem;
	box-shadow: 0 4px 16px rgba(97, 206, 112, 0.3);
}

.archive-info {
	flex: 1;
}

.archive-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--dark-text);
	margin: 0 0 0.25rem 0;
}

.archive-subtitle {
	font-size: 0.9375rem;
	color: var(--text-muted);
	margin: 0;
}

/* Modern Search Container */
.modern-search-container {
	margin-bottom: 2rem;
}

.modern-search-wrapper {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}

.search-icon {
	position: absolute;
	left: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	font-size: 1.125rem;
	pointer-events: none;
}

.modern-search-input {
	width: 100%;
	padding: 1rem 3.5rem 1rem 3.25rem;
	border: 1px solid var(--border-default);
	border-radius: 50px;
	font-size: 0.9375rem;
	color: var(--dark-text);
	background: var(--surface);
	transition: all 0.3s ease;
	outline: none;
}

.modern-search-input:focus {
	border-color: var(--brand-green);
	box-shadow: 0 0 0 3px rgba(97, 206, 112, 0.1);
}

.modern-search-input::placeholder {
	color: var(--text-muted);
}

.search-clear-btn {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border: none;
	background: var(--text-muted);
	color: var(--text-white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 0.875rem;
}

.search-clear-btn:hover {
	background: var(--brand-green);
	transform: translateY(-50%) scale(1.1);
}

/* Archive Grid */
.modern-archive-grid {
	margin-top: 2rem;
}

.archive-grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

/* Archive Card */
.modern-archive-card {
	background: var(--surface);
	border: 1px solid var(--border-default);
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.modern-archive-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	border-color: var(--brand-green);
}

.archive-card-link {
	display: block;
	padding: 1.25rem;
	text-decoration: none;
	color: inherit;
}

/* Archive Card Header */
.archive-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.archive-id-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: var(--surface-light);
	border: 1px solid var(--border-default);
	border-radius: 20px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--text-gray);
}

.archive-dropdown {
	position: relative;
}

.archive-menu-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.archive-menu-btn:hover {
	background: var(--surface-light);
	color: var(--brand-green);
}

/* Archive Unread Badge */
.archive-unread-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: var(--brand-green);
	color: var(--text-white);
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(97, 206, 112, 0.3);
	z-index: 5;
}

.archive-unread-badge i {
	font-size: 0.75rem;
}

/* Archive Card Title */
.archive-card-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--dark-text);
	margin: 0 0 1rem 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Archive Card Meta */
.archive-card-meta {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.meta-row {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.875rem;
	color: var(--text-gray);
}

.meta-row i {
	font-size: 1rem;
	color: var(--text-muted);
	width: 1.25rem;
	text-align: center;
}

.archived-badge-row {
	padding-top: 0.5rem;
	margin-top: 0.5rem;
	border-top: 1px solid var(--border-default);
	color: var(--brand-green);
	font-weight: 600;
}

.archived-badge-row i {
	color: var(--brand-green);
}

/* Empty State */
.empty-archive-state {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	text-align: center;
}

.empty-archive-state i {
	font-size: 4rem;
	color: var(--text-muted);
	margin-bottom: 1.5rem;
	opacity: 0.4;
}

/* Archive Page Grid Layout - Specific styling for archive page only */
.modern-jobs-section #archivedGrid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.25rem;
	margin-bottom: 2rem;
}

@media (min-width: 576px) {
	.modern-jobs-section #archivedGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.modern-jobs-section #archivedGrid {
		gap: 1.5rem;
	}
}

@media (min-width: 992px) {
	.modern-jobs-section #archivedGrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.modern-jobs-section #archivedGrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1400px) {
	.modern-jobs-section #archivedGrid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ==========================================
   Redesigned Archive Header
   ========================================== */

.archive-header-redesign {
	background: var(--surface);
	border-radius: 16px;
	overflow: hidden;
}

.archive-header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem;
	gap: 2rem;
	flex-wrap: wrap;
}

.archive-stats {
	flex-shrink: 0;
}

.stat-number {
	font-size: 3rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--brand-green) 0%, #4fb85f 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.stat-label {
	font-size: 1rem;
	color: var(--text-gray);
	font-weight: 500;
}

.archive-search-box {
	flex: 1;
	max-width: 500px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--surface-light);
	border: 2px solid var(--border-default);
	border-radius: 50px;
	padding: 0;
	transition: all 0.3s ease;
}

.archive-search-box:focus-within {
	border-color: var(--brand-green);
	background: var(--surface);
}

.archive-search-box i {
	font-size: 1.125rem;
	color: var(--text-muted);
	transition: color 0.3s ease;
	margin-left: 22px;
}

.archive-search-box:focus-within i {
	color: var(--brand-green);
}

.archive-search-field {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-size: 0.9375rem;
	color: var(--dark-text);
	font-weight: 500;
	padding: 10px 10px;
}

.archive-search-box input[type="text"]:focus {
	border: none !important;
	outline: none !important;
}

.archive-search-field::placeholder {
	color: var(--text-muted);
	font-weight: 400;
}

/* Responsive Archive Header */
@media (max-width: 768px) {
	.archive-header-top {
		flex-direction: column;
		align-items: flex-start;
		padding: 1.5rem;
		gap: 1.5rem;
	}

	.archive-search-box {
		width: 100%;
		max-width: 100%;
	}

	.stat-number {
		font-size: 2.5rem;
	}

	.stat-label {
		font-size: 0.9375rem;
	}
}

@media (max-width: 576px) {
	.archive-header-top {
		padding: 1.25rem;
	}

	.stat-number {
		font-size: 2rem;
	}

	.archive-search-box {
		padding: 0.75rem 1.25rem;
	}
}

/* Modern Job Card Menu (Three Dots) */
.job-card-menu {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 10;
}

.job-menu-btn {
	width: 36px;
	height: 36px;
	border: none;
	background: var(--surface);
	border: 1px solid var(--border-default);
	color: var(--text-muted);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.job-menu-btn:hover {
	background: var(--surface-light);
	color: var(--brand-green);
	border-color: var(--brand-green);
	box-shadow: 0 4px 12px rgba(97, 206, 112, 0.2);
	transform: translateY(-2px);
}

.job-menu-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.job-menu-btn i {
	font-size: 1rem;
	transition: transform 0.3s ease;
}

.job-menu-btn:hover i {
	transform: rotate(90deg);
}

/* Modern Job Card Dropdown Menu */
.job-card-menu .dropdown-menu {
	min-width: 200px;
	padding: 0.5rem;
	border: 1px solid var(--border-default);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	background: var(--surface);
	margin-top: 0.5rem !important;
}

.job-card-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	color: var(--text-gray);
	font-size: 0.9375rem;
	font-weight: 500;
	border-radius: 8px;
	transition: all 0.2s ease;
	margin-bottom: 0.25rem;
}

.job-card-menu .dropdown-item:last-child {
	margin-bottom: 0;
}

.job-card-menu .dropdown-item i {
	font-size: 1rem;
	color: var(--text-muted);
	width: 1.125rem;
	text-align: center;
	transition: all 0.2s ease;
}

.job-card-menu .dropdown-item:hover {
	background: var(--surface-light);
	color: var(--brand-green);
	transform: translateX(4px);
}

.job-card-menu .dropdown-item:hover i {
	color: var(--brand-green);
	transform: scale(1.1);
}

.job-card-menu .dropdown-item.text-danger:hover {
	background: rgba(255, 107, 107, 0.1);
	color: var(--danger-red);
}

.job-card-menu .dropdown-item.text-danger:hover i {
	color: var(--danger-red);
}

.job-card-menu .dropdown-item:active {
	transform: translateX(4px) scale(0.98);
}

.job-card-menu .dropdown-divider {
	margin: 0.5rem 0;
	border-top: 1px solid var(--border-default);
	opacity: 1;
}

/* Responsive adjustments for job card menu */
@media (max-width: 768px) {
	.job-menu-btn {
		width: 32px;
		height: 32px;
	}

	.job-menu-btn i {
		font-size: 0.9375rem;
	}

	.job-card-menu .dropdown-menu {
		min-width: 180px;
	}

	.job-card-menu .dropdown-item {
		padding: 0.625rem 0.875rem;
		font-size: 0.875rem;
	}
}

.empty-archive-state h5 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--dark-text);
	margin-bottom: 0.5rem;
}

.empty-archive-state p {
	font-size: 0.9375rem;
	color: var(--text-muted);
	margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
	.modern-archive-header {
		padding: 1.5rem;
	}

	.archive-icon-wrapper {
		width: 56px;
		height: 56px;
		font-size: 1.5rem;
	}

	.archive-title {
		font-size: 1.25rem;
	}

	.archive-grid-container {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 1.25rem;
	}
}

@media (max-width: 768px) {
	.modern-archive-header {
		padding: 1.25rem;
	}

	.archive-header-content {
		gap: 1rem;
	}

	.archive-icon-wrapper {
		width: 48px;
		height: 48px;
		font-size: 1.25rem;
	}

	.archive-title {
		font-size: 1.125rem;
	}

	.archive-subtitle {
		font-size: 0.875rem;
	}

	.modern-search-input {
		padding: 0.875rem 3rem 0.875rem 3rem;
		font-size: 0.875rem;
	}

	.archive-grid-container {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

.hdr-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.hdr-nav .nav-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hdr-nav .menu-item {
	position: relative;
}

.hdr-nav .nav-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	color: var(--black);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	border-radius: 10px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.hdr-nav .nav-link::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--brand-green);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}

.hdr-nav .nav-link:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}

.hdr-nav .nav-link:hover {
	color: var(--text-white);
	background: var(--brand-green);
	transform: translateY(-2px);
}

.hdr-nav .nav-link:active {
	transform: translateY(0);
}

.hdr-nav .nav-icon {
	font-size: 16px;
	opacity: 0.8;
	transition: all 0.3s ease;
}

.hdr-nav .nav-link:hover .nav-icon {
	opacity: 1;
	transform: scale(1.1);
}

.cta-section {
	flex-shrink: 0;
}

.modern-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	background: var(--brand-green);
	color: var(--text-white);
	font-size: 15px;
	font-weight: 600;
	border-radius: 50px;
	text-decoration: none;
	box-shadow: 0 4px 15px var(--brand-green);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.modern-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.modern-btn:hover::before {
	width: 300px;
	height: 300px;
}

.modern-btn:hover {
	box-shadow: 0 6px 25px var(--brand-green);
	transform: translateY(-2px);
	color: var(--text-white);
}

.modern-btn:active {
	transform: translateY(0);
}

.modern-btn i {
	transition: transform 0.3s ease;
}

.modern-btn:hover i {
	transform: translateX(4px);
}

.hdr-nav>ul>li {
	position: relative;
}

.hdr-nav ul.sub-menu {
	opacity: 0;
	position: absolute;
	z-index: 100;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	text-align: left;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
	border: 1px solid rgba(0, 0, 0, 0.05);
	width: 250px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	visibility: hidden;
	padding: 0.5rem 0;
	border-radius: 12px;
	transform: translateY(10px);
}

.hdr-nav ul.sub-menu li a {
	padding: 12px 20px;
	position: relative;
	display: flex;
	align-items: center;
	word-break: break-word;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--text-secondary);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border-left: 3px solid transparent;
}

.hdr-nav ul.sub-menu li a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 3px;
	background: var(--brand-green);
	transform: scaleY(0);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hdr-nav ul.sub-menu li a:hover::before {
	transform: scaleY(1);
}

.hdr-nav ul.sub-menu li a:hover {
	background: rgba(97, 206, 112, 0.1);
	color: var(--brand-green);
	padding-left: 24px;
}

.hdr-nav>ul>li>ul.sub-menu {
	top: calc(100% + 15px);
	left: 0;
}

.hdr-nav>ul>li:hover>ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.logo img {
	max-width: 100%;
}

.hdr-nav>ul>li.menu-item-has-children>a {
	position: relative;
	padding-right: 2rem;
}

.hdr-nav>ul>li.menu-item-has-children>a:after {
	content: "\f107";
	font-family: 'FontAwesome';
	position: absolute;
	right: 0.75rem;
	color: currentColor;
	font-size: 12px;
	opacity: 0.6;
	transition: all 0.3s ease;
}

.hdr-nav>ul>li.menu-item-has-children:hover>a:after {
	opacity: 1;
	transform: rotate(180deg);
}

.hdr-nav ul.sub-menu li.menu-item-has-children {
	position: relative;
}

.hdr-nav ul.sub-menu li.menu-item-has-children>a {
	position: relative;
	padding-right: 40px;
}

.hdr-nav ul.sub-menu li.menu-item-has-children>a:after {
	content: "\f105";
	font-family: 'FontAwesome';
	position: absolute;
	right: 20px;
	color: currentColor;
	opacity: 0.5;
	transition: all 0.3s ease;
}

.hdr-nav ul.sub-menu li.menu-item-has-children:hover>a:after {
	opacity: 1;
	transform: translateX(3px);
}

.hdr-nav ul.sub-menu li.menu-item-has-children ul.sub-menu {
	position: absolute;
	left: calc(100% + 5px);
	top: -0.5rem;
	width: 220px;
}

.hdr-nav ul.sub-menu li.menu-item-has-children:hover>ul.sub-menu {
	left: 100%;
	opacity: 1;
	z-index: 100;
	visibility: visible;
	transform: translateY(0);
}

.active-mobile-menu {
	position: fixed;
	overflow: hidden;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	content: '';
	transition: all 0.3s ease;
}

body.menu-open {
	overflow: hidden;
}

.main-header.modern-nav.scrl {
	box-shadow: 0 6px 40px rgba(0, 0, 0, 0.12);
	background: rgba(255, 255, 255, 0.98);
}

.main-header.modern-nav.scrl .nav-wrapper {
	padding: 0.5rem 0;
}

.hdr-nav .nav-link.active,
.hdr-nav .menu-item.current-menu-item .nav-link {
	color: var(--text-white);
	background: var(--brand-green);
	font-weight: 600;
}

.hdr-nav .nav-link.active::before,
.hdr-nav .menu-item.current-menu-item .nav-link::before {
	transform: scaleX(1);
	transform-origin: left;
}

.hdr-nav .nav-link.active .nav-icon,
.hdr-nav .menu-item.current-menu-item .nav-link .nav-icon {
	opacity: 1;
	transform: scale(1.1);
}

.mobile-menu .menu-item.current-menu-item a,
.mobile-menu .menu-item a.active {
	color: var(--text-white);
	font-weight: 600;
	background: var(--brand-green);
	border-left-color: var(--brand-green);
}

.mobile-menu .menu-item.current-menu-item a::before,
.mobile-menu .menu-item a.active::before {
	transform: scaleY(1);
}

.mobile-menu {
	position: fixed;
	height: 100%;
	width: 320px;
	right: -320px;
	top: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
	visibility: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform: translate3d(320px, 0, 0);
	z-index: 1001;
	overflow-y: auto;
}

.mobile-menu.active {
	background: rgba(255, 255, 255, 0.98);
	visibility: visible;
	z-index: 1001;
	transform: translate3d(0, 0, 0);
	right: 0;
}

.mobile-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-menu li a {
	display: flex;
	align-items: center;
	flex-direction: row;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
	min-height: 50px;
	border-bottom: 1px solid rgba(129, 129, 129, .2);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: .2px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
}

.mobile-menu ul.sub-menu {
	display: none;
	border-left: 1px solid var(--danger-red);
	background: var(--page-bg);
}

.mobile-menu ul li.menu-item-has-children {
	position: relative;
}

.mobile-menu ul li.menu-item-has-children>a {
	position: relative;
	z-index: 1;
}

.mobile-menu ul>li.menu-item-has-children {
	position: relative;
}

.mobile-menu ul>li.menu-item-has-children.active>a {
	background: var(--page-bg);
}

.mobile-menu ul>li.menu-item-has-children .menu-expand-s:before {
	content: "\f105";
	font-family: 'FontAwesome';
	position: absolute;
	right: 0;
	color: rgba(108, 117, 125, 0.45);
	z-index: 2;
	height: 50px;
	width: 50px;
	top: 0;
	bottom: 0;
	text-align: center;
	line-height: 50px;
	border-left: 1px solid rgba(129, 129, 129, .2);
}

.mobile-menu ul>li.menu-item-has-children .menu-expand-s.active:before {
	content: "\f107";
	background: var(--brand-green);
	color: var(--text-white);
}

.scrl .hdr-nav>ul>li {
	padding-top: 20px;
	padding-right: 5px;
	padding-bottom: 20px;
	padding-left: 5px;
}

.main-header.scrl {
	box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
	position: fixed;
	width: 100%;
	top: 0px;
	left: 0;
	right: 0;
	animation: smoothScroll 1s forwards;
}

@keyframes smoothScroll {
	0% {
		transform: translateY(-100px);
	}

	100% {
		transform: translateY(0px);
	}
}

.navbar-search-box .search-icon {
	position: absolute;
	left: 188px;
	top: 7px;
	color: var(--brand-green);
	font-size: 16px;
}

.main-header .button-frame {
	width: fit-content;
	border-width: 2px;
	padding: 8px 30px;
	border-radius: 50px;
}

.global-btn,
.secendary-btn,
.btn-secondary {
	padding: 12px 20px;
	border-radius: 50px;
	font-weight: bold;
	min-width: 100px;
	max-width: fit-content;
	text-align: center;
	cursor: pointer;
	line-height: 1 !important;
	font-size: 16px;
	margin: 0 5px;
	border: 2px solid var(--brand-green) !important;
	background: transparent;
	color: var(--brand-green);
}

.global-btn {
	background: var(--brand-green);
	color: var(--text-white);
	border: 2px solid var(--brand-green);
}

a.secendary-btn {
	color: var(--brand-green);
}

.global-btn:hover {
	background: var(--brand-green);
	color: var(--text-white);
}

[type="button"],
[type="submit"] {
	border: none;
}

.secendary-btn {
	background: transparent;
	color: var(--brand-green);
	border: 2px solid var(--brand-green);
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
	line-height: 1;
}

/* ==========================================================================
	404 Page
	========================================================================== */
.page-404 {
	margin: 150px 0;
}

.images-404 {
	text-align: center;
	margin-top: 20px;
}

.images-404 img {
	max-width: 500px;
	text-align: center;
}

.content-404 {
	text-align: center;
}

.page404_bt {
	margin: 30px auto;
}

.page404_bt .button-frame {
	padding: 12px 30px;
}

/* ==========================================================================
	Auth / Login
	========================================================================== */
.box,
.login {
	width: 100%;
	max-width: 460px;
	margin: auto;
	padding: 48px 40px;
	background: var(--surface);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 16px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
		0 10px 15px -3px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--border-default);
}

.login img {
	transition: all 0.3s ease;
}

.login .form-label {
	font-weight: 500;
	color: var(--dark-text);
	font-size: 14px;
	margin-bottom: 8px;
	display: block;
}

.login .form-control {
	padding: 12px 16px;
	border: 1.5px solid var(--border-default);
	border-radius: 10px;
	font-size: 15px;
	transition: all 0.3s ease;
	background: var(--surface-alt);
}

.login .form-control:focus {
	border-color: var(--brand-green);
	box-shadow: 0 0 0 3px rgba(97, 206, 112, 0.1);
	background: var(--surface);
	outline: none;
}

.login .form-check {
	gap: 10px !important;
}

.login .form-check-input {
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--border-medium);
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.login .form-check-input:checked {
	background-color: var(--brand-green);
	border-color: var(--brand-green);
}

.login .form-check-input:focus {
	box-shadow: 0 0 0 3px rgba(97, 206, 112, 0.1);
	border-color: var(--brand-green);
}

.login .form-check-label {
	font-size: 14px;
	color: var(--text-secondary);
	cursor: pointer;
	user-select: none;
}

.login .global-btn {
	width: 100%;
	padding: 14px 24px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 10px;
	transition: all 0.3s ease;
	letter-spacing: 0.3px;
}

.login .global-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(97, 206, 112, 0.3);
}

.login .global-btn:active {
	transform: translateY(0);
}

.login .text-primary {
	color: var(--brand-green) !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
	display: inline-block;
}

.login .text-primary:hover {
	color: var(--brand-green) !important;
	opacity: 0.8;
	text-decoration: underline;
}

.login .alert-danger {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: var(--danger-red);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
}

.login .register .btn-primary {
	padding: 10px 0;
}

.underline {
	border-bottom: 2px solid var(--brand-green);
	padding-bottom: 2px;
}

/* Login page responsive adjustments */
@media (max-width: 576px) {

	.box,
	.login {
		max-width: 90%;
		padding: 32px 24px;
		border-radius: 12px;
	}
}

/* ==========================================================================
	Dashboard
	========================================================================== */
.dashsidebar {
	padding: 20px 24px;
}

.dashtopNav {
	height: 60px;
	background: var(--surface);
	padding: 10px 16px;
}

.dashtoplogo {
	width: 80px;
}

.dashtoplogo img {
	width: 100%;
}

.dashlogo {
	padding: 12px 24px;
}

.dashtab {
	padding: 10px 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	color: var(--dark-text);
	cursor: pointer;
	display: block;
}

.dashtab:hover {
	background-color: var(--page-bg);
}

.dashtab.active {
	background-color: var(--brand-green);
	color: var(--text-white);
}

.dashtab i {
	padding: 0 18px;
	font-size: 20px;
}

.sidebar {
	z-index: 999;
}

@media screen and (max-width: 767px) {
	.sidebar {
		max-width: 18rem;
		transform: translateX(-100%);
		transition: transform 0.4s ease-out;
	}

	.sidebar.active {
		transform: translateX(0);
		z-index: 99999999;
	}
}

.dashmenu {
	color: var(--brand-green);
	left: 20px;
	font-size: 22px;
}

.dashcontrol {
	background-color: var(--surface);
	border-radius: 8px;
	padding: 40px;
}

/* ==========================================================================
	Checklists & Forms
	========================================================================== */
.displaychecklist {
	border: 1px solid var(--border-default);
	padding: 24px;
	border-radius: 10px;
	position: relative;
	background: var(--surface);
}

.displaychecklist .secendary-btn {
	padding: 6px 10px;
	border-radius: 50px;
	background: transparent;
	color: var(--text-secondary);
	border: 1px solid var(--border-default);
	text-align: center;
}

.displaychecklist .secendary-btn:hover {
	color: var(--brand-green);
}

.form-title {
	margin: 10px 0 40px 0;
	color: var(--black);
	border-bottom: 1px dashed var(--border-default);
	padding-bottom: 18px;
}

.form-subtitle {
	margin-bottom: 24px;
	color: var(--black);
}

.form-block-area {
	background: var(--surface);
	padding: 24px;
	margin-top: 24px;
}

.questions-item {
	border: 1px solid var(--border-default);
	border-radius: 5px;
	margin: 0 0px;
	position: relative;
}

.form-control {
	padding: 10px 20px;
	border-radius: 5px;
	border: 1px solid var(--border-default);
	transition: all 0.15s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus {
	border: 1px solid var(--brand-green);
	border-radius: 5px;
	outline: 0px !important;
	box-shadow: none !important;
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
}

.question_input {
	position: absolute;
	left: -9999px;
}

.question__label {
	position: relative;
	display: block;
	line-height: 40px;
	border-radius: 5px;
	background-color: var(--surface);
	padding: 5px 0px 5px 48px;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
}

.question__label:hover {
	border-color: var(--danger-red);
}

.question__label:before {
	position: absolute;
	top: 12px;
	left: 10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--surface);
	box-shadow: inset 0 0 0 1px var(--border-default);
	content: "";
	transition: all 0.15s ease-in-out;
}

.question_input:checked+.question__label:before {
	background-color: var(--brand-green);
	box-shadow: none;
}

.question__label:after {
	position: absolute;
	content: "";
}

.question_input:checked+.question__label:after {
	top: 22px;
	left: 18px;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--surface);
	border-bottom: 2px solid var(--surface);
	transform: rotate(-45deg);
}

input[type="radio"]:hover+.question__label {
	cursor: pointer;
}

input:focus {
	outline: none;
}

/* ==========================================================================
	Progress Steps
	========================================================================== */
.progress-container {
	margin-bottom: 20px;
	text-align: center;
}

.progress-bar {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 33px auto;
	flex-direction: row;
	width: 900px;
	height: 100px;
}

.progress-step {
	width: 30px;
	height: 30px;
	border: 2px solid var(--border-default);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: var(--surface);
	font-size: 14px;
	font-weight: bold;
	margin: auto;
}

.progress-step.active {
	border-color: var(--brand-green);
	background-color: var(--brand-green);
	color: var(--text-white);
}

.progress-step.completed::after {
	content: '✔';
	font-size: 16px;
	color: var(--text-white);
	width: 30px;
	height: 30px;
	border: 2px solid var(--border-default);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--brand-green);
	font-weight: bold;
	position: absolute;
}

.progress-title {
	position: absolute;
	margin-top: 70px;
}

.progress-step.active .progress-title {
	color: var(--danger-red);
}

.progress-step.completed .progress-title {
	color: var(--brand-green);
}

.progress-step.active .active-indicator {
	display: inline-block;
}

.step {
	display: none;
}

.step.active {
	display: block;
}

.step-buttons {
	display: flex;
	justify-content: space-around;
	padding: 60px 0;
}

/* ==========================================================================
	Hardware Section
	========================================================================== */
.hardware-area {
	background: var(--surface);
	padding: 50px 36px 40px 50px;
	position: relative;
	border-radius: 5px;
	margin-bottom: 30px;
}

.hardware-tools {
	font-size: 20px;
}

.hardware-title {
	position: absolute;
	background: var(--brand-green);
	width: fit-content;
	font-size: 15px;
	padding: 8px 28px;
	color: var(--text-white);
	top: 0;
	left: 0;
	border-radius: 0 0 25px 0;
}

.hardware-sections {
	margin-top: 70px;
}

.form-page-title {
	background: transparent;
	color: var(--text-secondary);
	font-size: 18px;
	margin: 50px auto;
	padding: 12px 42px;
	border-radius: 40px;
	text-align: center;
	border: 2px solid var(--brand-green);
	width: fit-content;
	font-weight: bold;
	display: none;
}

.active-indicator {
	display: none;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	background-color: var(--brand-green);
	border-radius: 50%;
	position: relative;
	color: var(--text-white);
}

span.blink {
	display: block;
	width: 10px;
	height: 10px;
	background-color: var(--brand-green);
	opacity: 0.7;
	border-radius: 50%;
	animation: blink 1s linear infinite;
}

@keyframes blink {
	100% {
		transform: scale(2, 2);
		opacity: 0;
	}
}

.check-box-area {
	border: 1px solid var(--border-default);
	padding: 0px 10px;
	margin: 24px 0;
	border-radius: 5px;
}

.check-box-area:hover {
	border: 1px solid var(--brand-green);
}

/* ==========================================================================
	Upload Previews
	========================================================================== */
.preview-container {
	width: 180px;
	margin: 30px 12px;
	position: relative;
	display: inline-block;
	height: 130px;
}

.preview-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.preview-container .delete-btn {
	width: 20px;
	height: 20px;
	background: var(--danger-red);
	text-align: center;
	color: var(--text-white);
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 12px;
	cursor: pointer;
	font-size: 12px;
	line-height: 1.8;
}

.preview-label {
	padding: 0 12px;
	max-width: 100%;
}

.preview-data {
	padding: 0 5px;
}

.checked-none {
	position: relative;
	margin-left: 20px;
	color: var(--danger-red);
}

.checked-none::after {
	content: '\f06a';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	height: 22px;
	width: 22px;
	position: absolute;
	top: -2px;
	right: 103px;
	color: var(--text-secondary);
	text-align: center;
	line-height: 22px;
	border-radius: 50%;
	font-size: 18px;
}

.checked-yes {
	position: relative;
	margin-left: 20px;
}

.checked-yes::after {
	background: var(--brand-green);
	content: '\f00c';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	height: 20px;
	width: 20px;
	position: absolute;
	top: -1px;
	right: 34px;
	color: var(--text-white);
	text-align: center;
	line-height: 20px;
	border-radius: 50%;
	font-size: 12px;
}

.checked-no {
	position: relative;
	margin-left: 20px;
}

.checked-no::after {
	background: var(--danger-red);
	content: '\f00c';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	height: 20px;
	width: 20px;
	position: absolute;
	top: -1px;
	right: 34px;
	color: var(--text-white);
	text-align: center;
	line-height: 20px;
	border-radius: 50%;
	font-size: 12px;
}

.itemview-area {
	border: 1px solid var(--border-default);
	padding: 8px 14px;
	border-radius: 5px;
}

.itemview-area img {
	margin-bottom: 5px;
}

.dashcontrol .ck-unfinished {
	background: var(--border-default);
	color: var(--danger-red);
	font-weight: bold;
	padding: 2px 38px;
	border-radius: 0 0 24px 24px;
	font-size: 14px;
	position: absolute;
	top: 17px;
	left: 50%;
	transform: translate(-50%, -50%);
	width: fit-content;
}

.dashcontrol .ck-completed {
	background: var(--brand-green);
	color: var(--text-white);
	font-weight: bold;
	padding: 2px 38px;
	border-radius: 0 0 24px 24px;
	font-size: 14px;
	position: absolute;
	top: 17px;
	left: 50%;
	transform: translate(-50%, -50%);
	width: fit-content;
}

.view-form .form-block-area {
	padding: 44px 54px;
}

.hardware-atitle {
	background: var(--brand-green);
	width: fit-content;
	font-size: 15px;
	padding: 8px 28px;
	color: var(--text-white);
	border-radius: 0 0px 30px 0;
	margin-right: 20px;
}

.workflow_view {
	display: flex;
	border-bottom: 1px dashed var(--border-gray);
	padding: 8px 0;
}

.info_header {
	width: 220px;
	text-align: right;
	padding: 0 10px 0 0;
	font-weight: bold;
}

.info_content {
	width: 100%;
	padding: 0 5px;
}

.attachment-content {
	position: relative;
	border: 1px solid var(--border-default);
	border-radius: 12px;
	padding: 10px;
	background: var(--surface);
	margin-bottom: 8px;
}

.file-icon-circle img {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
}

/* ==========================================================================
	Inbox / Chat
	========================================================================== */
.inbox-main-wrapper {
	width: 100%;
	height: 100dvh;
}

.inbox-main-wrapper .modern-search-wrapper {
	margin: 0 0;
}

.inbox-main-wrapper .inbox-container {
	width: 100%;
	max-width: 1920px;
	margin: auto;
}

.chat-card {
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 16px;
	box-sizing: border-box;
	height: calc(100vh - 105px);
	display: flex;
	flex-direction: column;
	background: var(--surface);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.chat-header {
	padding: 20px;
	border-bottom: 1px solid var(--border-default);
	display: flex;
	align-items: center;
}

.user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--brand-green);
	padding: 2px;
}

.chat-body {
	flex-grow: 1;
	padding: 20px;
	overflow-y: auto;
	background-color: var(--surface);
}

.message-row {
	margin: 20px 0;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.msg-incoming {
	justify-content: flex-start;
}

.msg-outgoing {
	justify-content: flex-end;
}

.bubble {
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--surface);
	line-height: 1.4;
	font-size: 14px;
	color: var(--text-gray);
	width: fit-content;
	max-width: 75%;
}

.chat-body .msg-text a,
.chat-body .msg-text a.msg-link {
	color: var(--brand-green);
	text-decoration: underline;
	font-weight: 600;
	word-break: break-word;
}

.chat-body .msg-text a:hover,
.chat-body .msg-text a.msg-link:hover {
	color: var(--brand-green);
}

.msg-incoming .bubble {
	background-color: var(--surface-light);
	color: var(--text-gray);
	border-radius: 0 12px 12px 12px;
	font-size: 0.95rem;
	border: 1px solid var(--border-default);
}

.msg-outgoing .bubble {
	background: var(--page-bg);
	border: 1px solid var(--border-default);
	color: var(--text-secondary);
	border-radius: 12px 0 12px 12px;
	padding: 15px;
	font-size: 0.95rem;
	max-width: 80%;
	text-align: left;
	float: right;
}

.file-bubble {
	position: relative;
	border-radius: 12px 0 12px 12px;
	padding: 10px 15px;
	background: var(--page-bg);
	border: 1px solid var(--border-default);
	max-width: 85%;
	display: flex;
	flex-direction: column;
	align-items: end;
}

.msg-incoming .file-bubble {
	background: var(--surface-light);
	border-radius: 0px 12px 12px 12px;
}

.file-bubble.file-bubble-group {
	padding: 12px;
}

.file-bubble .attachment-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (min-width: 992px) {
	.file-bubble .attachment-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.file-bubble .attachment-grid-item {
	position: relative;
	border: 1px solid var(--border-default);
	border-radius: 12px;
	padding: 10px;
	background: var(--surface);
}

.file-bubble .attachment-grid-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.file-bubble .attachment-tile-delete {
	padding: 2px 8px;
	line-height: 1;
}

.file-icon-circle {
	color: var(--text-white);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	text-align: center;
	margin: auto;
	display: flex;
}

.chat-footer {
	padding: 15px 20px;
	border-top: 1px solid var(--border-default);
	position: relative;
}

.input-box {
	border-radius: 30px;
	padding: 12px 20px;
	border: 1px solid var(--border-default);
	min-height: 45px;
}

.btn-send {
	background-color: var(--brand-green);
	color: var(--text-white);
	border: none;
	border-radius: 12px;
	width: 50px;
	height: 45px;
	margin-left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.attach-google {
	background-color: var(--surface);
	color: var(--text-gray);
	border-radius: 12px;
	width: 50px;
	height: 45px;
	margin-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	border: 1px solid var(--border-default);
}

.attach-local {
	background-color: var(--surface);
	color: var(--text-gray);
	border-radius: 12px;
	width: 50px;
	height: 45px;
	margin-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-default);
}

.btn-send:hover {
	background-color: var(--brand-green);
	color: var(--text-white);
}

.inbox-sidebar {
	padding: 30px;
	background-color: var(--surface);
	border: 1px solid var(--border-default);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 105px);
}

#desktopProjectSidebar .recent-attachments-section {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

#desktopProjectSidebar .file-scoll-content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

body.inJobSidebar-open {
	overflow: hidden;
}

body.projectInfoSidebar-open {
	overflow: hidden;
}

.projectInfoSidebar {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 80vw;
	max-width: 520px;
	background: var(--surface);
	z-index: 1055;
	transform: translateX(100%);
	transition: transform 320ms ease;
	will-change: transform;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.projectInfoSidebar.is-open {
	transform: translateX(0);
}

.projectInfoSidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border-default);
}

.projectInfoSidebar__close {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	padding: 6px 8px;
}

#projectInfoSidebarContent {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
}

.projectInfoSidebar-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 1050;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.projectInfoSidebar-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.projectInfoSidebar .recent-attachments-section {
	display: none;
}

.inJobSidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 80vw;
	max-width: 520px;
	background: var(--surface);
	z-index: 1055;
	transform: translateX(-100%);
	transition: transform 320ms ease;
	will-change: transform;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.inJobSidebar.is-open {
	transform: translateX(0);
}

.inJobSidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border-default);
}

.inJobSidebar__close {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	padding: 6px 8px;
}

#inJobSidebarContent {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
}

.inJobSidebar-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 1050;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.inbox-sidebar #jobListContainer {
	overflow-y: auto;
}

.inJobSidebar-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

#jobListContainer {
	flex: 1;
	border-top: 1px solid var(--border-default);
	padding-top: 15px;
}

#desktopJobSidebar .form-control {
	padding: 10px 32px;
}

#open_inJobSidebar {
	border-radius: 5px;
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 12;
	border: 1px solid var(--border-default);
	margin-right: 10px;
}

.job-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.job-unread-badge {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--danger-red);
	color: var(--text-white);
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
	animation: pulse-badge 2s ease-in-out infinite;
}

.design-phase-box {
	background-color: var(--page-bg);
	border: 1px dashed var(--border-default);
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 20px;
}

.delivery-time {
	font-size: 1.2rem;
	color: var(--text-gray);
	font-weight: bold;
}

.attachment-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--border-default);
	border-radius: 12px;
	padding: 10px;
	margin-bottom: 12px;
	transition: 0.2s;
}

.attachment-item:hover {
	border-color: var(--brand-green);
}

.download-btn {
	background-color: var(--brand-green);
	color: var(--text-white);
	border-radius: 50%;
	width: 22px;
	height: 22px;
	margin-left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.filepreview {
	width: 120px;
	height: 100px;
	border-radius: 8px;
	margin: auto;
}

.msgimgpreview {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	object-fit: cover;
}

.download-btn:hover {
	background: var(--brand-green);
	border-color: var(--brand-green);
	color: var(--text-white);
}

.attachment-content .download-link {
	z-index: 10;
	position: absolute;
	right: 10%;
	top: 10%;
}

.attachment-grid-top .download-link {
	z-index: 10;
	position: absolute;
	right: 10%;
	top: 10%;
}

.text-xs {
	font-size: 0.75rem;
}

.meta-line {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	color: var(--text-gray);
	margin-top: 6px;
	justify-content: flex-end;
}

.meta-time {
	color: var(--text-gray);
	font-size: 12px;
}

.meta-tick {
	color: var(--text-gray);
	font-weight: 600;
	font-size: 12px;
}

.meta-tick.seen {
	color: var(--brand-green);
}

.msg-status-sending {
	color: var(--text-muted);
	font-size: 12px;
}

.bubble-wrap {
	width: 100%;
}

.text-green {
	color: var(--brand-green) !important;
}

#downloadAllBtn {
	padding: 10px 8px;
	cursor: pointer;
}

#downloadAllBtn:hover {
	text-decoration: underline;
}

.chat-footer textarea {
	resize: none;
	width: 100% !important;
	font-size: 14px;
	max-height: 150px;
	overflow-y: auto;
	line-height: 1.5;
	transition: height 0.2s ease;
}

.chat-footer .input-box {
	border-radius: 5px !important;
}

.chat-footer .input-box::-webkit-scrollbar {
	display: none;
}

.chat-footer .input-box {
	scrollbar-width: none;
}

/* ==========================================================================
	Upload Modals
	========================================================================== */
.google_drive_upload,
.local_drive_upload {
	background: var(--surface);
	border: 1px solid var(--border-default);
	border-radius: 16px;
	position: absolute;
	width: calc(100% - 40px);
	max-width: 100%;
	left: 50%;
	transform: translateX(-50%);
	bottom: 75px;
	z-index: 1100;
	overflow: hidden;
	animation: slideUpFade 0.3s ease-out;
	transition: bottom 0.2s ease;
}

@keyframes slideUpFade {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.upload-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 24px;
	border-bottom: 1px solid var(--border-default);
	background: var(--surface-light);
	pointer-events: auto;
	position: relative;
	z-index: 10;
}

.upload-modal-title {
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 600;
	color: var(--black);
	gap: 8px;
}

.upload-modal-title i {
	font-size: 20px;
	color: var(--brand-green);
}

.upload-modal-close {
	background: transparent;
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-gray);
	transition: all 0.2s ease;
	pointer-events: auto;
	position: relative;
	z-index: 11;
}

.upload-modal-close:hover {
	background: var(--page-bg);
	color: var(--danger-red);
}

.upload-modal-close i {
	font-size: 20px;
}

.upload-modal-body {
	padding: 24px;
	max-height: 60vh;
	overflow-y: auto;
}

.connection-prompt {
	text-align: center;
	padding: 40px 20px;
}

.connection-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	background: var(--surface);
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(66, 133, 244, 0.3);
	color: var(--brand-green);
}

.connection-icon i {
	font-size: 40px;
	color: var(--brand-green);
}

.connection-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 12px;
}

.connection-description {
	color: var(--text-gray);
	font-size: 14px;
	margin-bottom: 24px;
	line-height: 1.5;
}

.disconnect-section {
	margin-bottom: 20px;
}

.disconnect-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--page-bg);
	border: 1px solid var(--border-default);
	border-radius: 8px;
	color: var(--text-gray);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.disconnect-btn:hover {
	background: #fee;
	border-color: var(--danger-red);
	color: var(--danger-red);
}

.modern-dropzone {
	border: 2px dashed var(--border-gray);
	border-radius: 12px;
	padding: 40px 20px;
	text-align: center;
	cursor: pointer;
	background: var(--surface-light);
	transition: all 0.3s ease;
	position: relative;
	max-width: 600px;
	margin: auto;
}

.modern-dropzone:hover {
	border-color: var(--brand-green);
	background: var(--surface);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(97, 206, 112, 0.15);
}

.modern-dropzone.dragover {
	border-color: var(--brand-green);
	background: rgba(97, 206, 112, 0.05);
	border-style: solid;
	box-shadow: 0 0 0 4px rgba(97, 206, 112, 0.1);
}

.dropzone-content {
	pointer-events: none;
}

.upload-icon-modern {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface);
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.upload-icon-modern img {
	width: 48px;
	height: 48px;
	opacity: 0.8;
}

.dropzone-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 8px;
}

.dropzone-subtitle {
	font-size: 14px;
	color: var(--text-gray);
	margin-bottom: 16px;
}

.browse-link {
	color: var(--brand-green);
	font-weight: 500;
	cursor: pointer;
}

.dropzone-info {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--page-bg);
	border-radius: 6px;
	font-size: 12px;
	color: var(--text-muted);
}

.dropzone-info i {
	font-size: 13px;
}

.modern-progress-container {
	margin: 20px 0;
	padding: 16px;
	background: var(--page-bg);
	border-radius: 10px;
}

.progress-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.progress-text {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-gray);
}

.progress-percentage {
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-green);
}

.modern-progress-bar {
	height: 8px;
	width: 100%;
	background: var(--border-default);
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}

.modern-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--brand-green), #4ecdc4);
	border-radius: 10px;
	transition: width 0.3s ease;
	position: relative;
	overflow: hidden;
}

.modern-progress-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(90deg,
			transparent,
			rgba(255, 255, 255, 0.3),
			transparent);
	animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

.preview-section {
	margin-top: 20px;
}

.file-preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}

.upload-preview-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.preview-item {
	width: 120px;
	border: 1px solid var(--border-default);
	border-radius: 8px;
	padding: 8px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: var(--surface);
	margin-bottom: 14px;
	transition: all 0.2s ease;
}

.preview-item:hover {
	border-color: var(--brand-green);
	box-shadow: 0 2px 8px rgba(97, 206, 112, 0.15);
	transform: translateY(-2px);
}


.preview-media {
	position: relative;
	width: 100px;
	height: 70px;
}

.preview-media .preview-thumb {
	width: 100px;
	height: 70px;
}

@property --p {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

.preview-progress-circle {
	position: absolute;
	right: 30%;
	top: 20%;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: conic-gradient(var(--brand-green) calc(var(--p, 0) * 1%), var(--border-default) 0);
	transition: --p 0.15s linear;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-gray);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.preview-progress-circle::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 999px;
	background: var(--surface);
}

.preview-progress-label {
	position: relative;
	line-height: 1;
}

#upload_progress_container_local,
#upload_progress_container_google {
	display: none !important;
}

.preview-thumb {
	width: 100px;
	height: 70px;
	object-fit: cover;
	border-radius: 4px;
	background: var(--page-bg);
	display: block;
}

.preview-name {
	font-size: 12px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.preview-remove {
	background: var(--danger-red);
	color: var(--text-white);
	line-height: 1;
	border-radius: 20px;
	font-size: 14px;
	right: 10px;
	top: 10px;
	position: absolute;
}

.file-bubble.file-image {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 10px;
	background: var(--surface);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.file-bubble.file-image .img-preview {
	width: 96px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.file-bubble.file-image .file-info {
	flex: 1;
	min-width: 0;
}

.file-bubble.file-image .download-btn {
	margin-left: 8px;
	color: var(--text-gray);
}

.attachment-size {
	font-size: 12px;
}

.attachment-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 76px;
	font-size: 12px;
}

.gsi-material-button {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--surface);
	background-image: none;
	border: 1px solid var(--text-muted);
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: var(--text-secondary);
	cursor: pointer;
	font-family: 'Roboto', arial, sans-serif;
	font-size: 14px;
	height: 40px;
	letter-spacing: 0.25px;
	outline: none;
	overflow: hidden;
	padding: 0 12px;
	position: relative;
	text-align: center;
	-webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
	transition: background-color .218s, border-color .218s, box-shadow .218s;
	vertical-align: middle;
	white-space: nowrap;
	width: auto;
	max-width: 400px;
	min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
	height: 20px;
	margin-right: 12px;
	min-width: 20px;
	width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
	-webkit-align-items: center;
	align-items: center;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	height: 100%;
	justify-content: space-between;
	position: relative;
	width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	font-family: 'Roboto', arial, sans-serif;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
	-webkit-transition: opacity .218s;
	transition: opacity .218s;
	bottom: 0;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.gsi-material-button:disabled {
	cursor: default;
	background-color: var(--surface);
	border-color: var(--text-secondary);
}

.gsi-material-button:disabled .gsi-material-button-contents {
	opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
	opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
	background-color: var(--dark-surface);
	opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
	-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
	box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
	background-color: var(--dark-surface);
	opacity: 8%;
}

.msg-actions {
	position: absolute;
	top: 0;
	left: -32px;
}

.msg-action-toggle {
	display: flex;
	border-radius: 5px;
	border: 1px solid var(--border-default);
	background: var(--surface-alt);
	color: var(--text-secondary);
	font-size: 16px;
	padding: 0 5px;
}

.msg-action-toggle:hover {
	background: var(--brand-green);
	border-color: var(--brand-green);
	color: var(--text-white);
}

.msg-action-toggle:focus-visible {
	outline: 2px solid var(--brand-green);
	outline-offset: 2px;
}

.msg-action-menu {
	background: var(--surface);
	border: 1px solid var(--border-default);
	border-radius: 4px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 0;
	top: 24px;
	gap: 10px;
}

.msg-action-btn {
	display: flex;
	border-radius: 8px;
	background: var(--surface);
	color: var(--text-secondary);
	font-size: 0.9rem;
	text-decoration: none;
	cursor: pointer;
	justify-content: center;
}

.msg-action-btn i {
	pointer-events: none;
}

.msg-action-btn:hover {
	background: none !important;
	color: var(--text-gray) !important;
}

.msg-actions-incoming {
	left: 6px;
	right: auto;
	flex-direction: row;
	align-items: center;
}

.job-item {
	border: 1px solid var(--border-medium);
	border-radius: 12px;
	padding: 22px;
	margin: 14px auto;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.job-item .text-muted {
	font-size: 14px;
	line-height: 24px;
	border-bottom: 1px dashed var(--border-medium);
	padding: 4px 0;
}

.job-item:hover {
	background: var(--page-bg);
}

.job-item.is-selected {
	background: var(--page-bg);
	opacity: 0.85;
}

.leads-kanban .container {
	max-width: 1600px;
}

.kanban-card {
	border: 1px solid var(--border-medium);
	border-radius: 12px;
	padding: 12px;
	background: var(--surface);
	color: var(--dark-text);
	cursor: pointer;
}

.kanban-header {
	border: 1px solid var(--border-medium);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 20px;
	background: var(--surface);
	color: var(--dark-text);
	font-weight: 700;
}

.kanban-header .col-count {
	background: var(--brand-green);
	padding: 4px 10px;
	color: var(--text-white);
	border-radius: 24px;
}

.kanban-item-title {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.kanban-item-desc {
	font-size: 12px;
	padding-bottom: 1px;
	border-bottom: 1px dashed var(--border-medium);
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.kanban-item-desc i {
	margin-right: 5px;
}

.kanban-list .kanban-card:hover {
	background: var(--page-bg);
	cursor: pointer;
	border-radius: 10px;
}

/* Drag and Drop Placeholder Styles */
.kanban-ghost {
	opacity: 1 !important;
	background: transparent !important;
	border: 2px dashed var(--brand-green) !important;
	border-radius: 12px !important;
	min-height: 120px !important;
}

.kanban-ghost * {
	visibility: hidden !important;
	opacity: 0 !important;
}

.kanban-chosen {
	opacity: 0.8;
	cursor: move !important;
}

.kanban-dragging {
	opacity: 0.9;
	cursor: move !important;
	z-index: 9999;
}

.kanban-fallback {
	cursor: move !important;
	opacity: 0.8;
}

.kanban-column {
	max-height: 80vh;
	overflow-y: auto;
}

.djoblists {
	width: 700px;
	height: 80vh;
	overflow-y: auto;
	margin: auto;
	padding: 20px;
}

.djobitem {
	margin: 10px 0;
	border: 1px solid var(--border-medium);
	border-radius: 12px;
	padding: 23px;
	background: var(--surface);
	display: flex;
	position: relative;
}

.djobs-title {
	font-size: 14px;
	font-weight: 600;
}

.form-container {
	margin: 20px auto;
	padding: 30px;
	background: var(--surface);
	border-radius: 8px;
	max-width: 800px;
}

.add-new-project input[type="file"] {
	background: var(--surface);
	padding: 10px 0px 10px 18px;
	border-radius: 8px;
	border: 1px solid var(--brand-green);
	margin: 12px auto;
	font-size: 14px;
	width: fit-content;
}

.add-new-project .dropzone {
	padding: 30px 0;
}

.add-new-project .preview-media {
	position: relative;
	width: 100px;
	height: 92px;
}

.three-dots {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	color: var(--text-gray);
	padding: 5px 10px;
}

.three-dots:hover {
	background: transparent !important;
}

.three-dots-item {
	font-size: small;
	padding: 12px;
	line-height: 0;
}

.three-dots-item:hover {
	background: transparent !important;
}

.view-brief {
	position: absolute;
	right: 10px;
	top: 10px;
	border: 1px solid var(--brand-green);
	padding: 12px 10px;
	line-height: 0;
	font-size: 14px;
	border-radius: 5px;
	background: var(--surface);
}

.recent-attachment .fw-medium {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 80%;
}

.upload-icon {
	font-size: 48px;
	color: var(--brand-green);
	margin-bottom: 12px;
}

.upload-icon img {
	width: 80px;
}

.prechat-brief {
	padding: 2rem;
	border: 1px solid;
	border-radius: 0px 8px 8px 8px;
	border-color: var(--border-default);
	height: fit-content;
	overflow: hidden;
	background: var(--page-bg);
}

.prechat-brief p {
	margin: 0 0 .5rem;
	line-height: 1.4;
}

.prechat-brief p:last-child {
	margin-bottom: 0;
}

.load-older-spinner {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--border-default);
	border-top-color: var(--brand-green);
	border-radius: 50%;
	animation: cf-spin .75s linear infinite;
	vertical-align: middle;
}

@keyframes cf-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.load-older-retry {
	margin-right: .5rem;
}

.chat-back-button {
	color: var(--text-secondary);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 12;
	border: 2px solid var(--border-default);
}

.newmessage {
	position: relative;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.newmessage:hover {
	transform: scale(1.05);
}

.newmessage-icon {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--page-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-gray);
	font-size: 18px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.newmessage:hover .newmessage-icon {
	background: var(--brand-green);
	color: var(--text-white);
	box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.newmessage-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--danger-red);
	color: var(--text-white);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4), 0 0 0 3px var(--surface);
	animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {

	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4), 0 0 0 3px #fff;
	}

	50% {
		transform: scale(1.1);
		box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6), 0 0 0 3px #fff;
	}
}

/* ==========================================================================
	Notifications
	========================================================================== */
.notification-panel {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.notification-panel.is-open {
	pointer-events: auto;
	opacity: 1;
}

.notification-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.notification-panel.is-open .notification-backdrop {
	opacity: 1;
}

.notification-container {
	position: absolute;
	top: 70px;
	right: 20px;
	width: 420px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 100px);
	background: var(--surface);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(-20px) scale(0.95);
	opacity: 0;
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-panel.is-open .notification-container {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.notification-header {
	padding: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	background: var(--page-bg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.notification-header-content {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.notification-icon-wrapper {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--brand-green);
	color: var(--text-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.notification-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-gray);
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.notification-subtitle {
	font-size: 12px;
	color: var(--text-gray);
	margin: 2px 0 0;
	font-weight: 500;
}

.notification-close {
	background: var(--page-bg);
	color: var(--text-gray);
	border: none;
	border-radius: 10px;
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.notification-close:hover {
	background: var(--border-default);
	color: var(--text-gray);
	transform: rotate(90deg);
}

.notification-body {
	padding: 12px;
	overflow-y: auto;
	flex: 1;
	scrollbar-width: thin;
	scrollbar-color: var(--border-default) transparent;
}

.notification-body::-webkit-scrollbar {
	width: 6px;
}

.notification-body::-webkit-scrollbar-track {
	background: transparent;
}

.notification-body::-webkit-scrollbar-thumb {
	background: var(--border-default);
	border-radius: 10px;
}

.notification-body::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

.notification-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.notification-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid rgba(0, 0, 0, 0.05);
	text-decoration: none;
	color: inherit;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translateX(-20px);
}

.notification-item.fade-in {
	opacity: 1;
	transform: translateX(0);
}

.notification-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 3px;
	background: var(--brand-green);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.notification-item:hover {
	background: var(--page-bg);
	transform: translateX(4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.08);
}

.notification-item:hover::before {
	opacity: 1;
}

.notification-item-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--page-bg);
	color: var(--brand-green);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.notification-item-content {
	flex: 1;
	min-width: 0;
}

.notification-item-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.notification-item-badge {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-gray);
	background: var(--page-bg);
	padding: 3px 8px;
	border-radius: 6px;
	letter-spacing: 0.02em;
}

.notification-item-count {
	font-size: 11px;
	font-weight: 700;
	color: var(--danger-red);
	background: var(--page-bg);
	padding: 3px 8px;
	border-radius: 6px;
}

.notification-item-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-gray);
	margin: 0 0 6px;
	line-height: 1.4;
	word-wrap: break-word;
	transition: color 0.2s ease;
}

.notification-item:hover .notification-item-title {
	color: var(--brand-green);
}

.notification-item-meta {
	font-size: 12px;
	color: var(--text-muted);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.notification-item-meta i {
	font-size: 11px;
}

.notification-item-arrow {
	flex-shrink: 0;
	color: var(--border-default);
	font-size: 14px;
	transition: all 0.2s ease;
}

.notification-item:hover .notification-item-arrow {
	color: var(--brand-green);
	transform: translateX(4px);
}

.notification-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.notification-empty-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--page-bg);
	color: var(--brand-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	font-size: 36px;
}

.notification-empty-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-gray);
	margin: 0 0 8px;
}

.notification-empty-text {
	font-size: 13px;
	color: var(--text-muted);
	margin: 0;
}

.notification-footer {
	padding: 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	background: var(--page-bg);
}

.notification-footer-btn {
	width: 100%;
	padding: 12px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	background: var(--surface);
	color: var(--text-gray);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.notification-footer-btn:hover {
	background: var(--brand-green);
	color: var(--text-white);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
	border-color: transparent;
}

@media (max-width: 768px) {
	.notification-container {
		right: 10px;
		top: 60px;
		width: calc(100vw - 20px);
	}
}

.prechat-attachment-preview {
	width: 100%;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--page-bg);
	overflow: hidden;
	border-bottom: 1px solid var(--border-default);
}

.prechat-attachment-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prechat-attachment-preview.prechat-icon img {
	object-fit: contain;
	padding: 12px;
	height: 76px;
}

.prechat-attachment-card {
	height: 100%;
	position: relative;
}

.attachment_info {
	display: flex;
}

.download-zip {
	cursor: pointer;
}

/* Batch ZIP Download Button */
.batch-zip-download {
	position: absolute;
	top: 0px;
	right: -40px;
	z-index: 10;
}

.download-zip-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--surface);
	border: 1px solid var(--border-default);
	color: var(--text-secondary);
	text-decoration: none;
	transition: all 0.2s ease;
	font-size: 14px;
}

.download-zip-btn:hover {
	background: var(--brand-green);
	border-color: var(--brand-green);
	color: var(--text-white);
}


.download-zip-btn i {
	pointer-events: none;
}

/* Only show ZIP button on incoming messages */
.msg-outgoing .batch-zip-download {
	display: none;
}

/* ==========================================================================
	Tasks Drawer
	========================================================================== */
.task-card {
	border: 1px solid var(--border-default);
	border-radius: 12px;
	height: calc(100vh - 150px);
	display: flex;
	flex-direction: column;
	background: var(--surface);
}

.taskbar {
	border: 1px solid var(--brand-green);
	background: var(--surface);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

.tasklist {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 420px;
	max-width: calc(100vw - 24px);
	background: var(--page-bg);
	backdrop-filter: blur(10px);
	transform: translateX(110%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
	z-index: 1060;
	border-left: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: -8px 0 40px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
}

.tasklist.open {
	transform: translateX(0);
	box-shadow: -12px 0 60px rgba(0, 0, 0, 0.12);
}

.tasklist-header {
	padding: 24px 24px 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.tasklist-header-content {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1;
}

.tasklist-icon-wrapper {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--brand-green);
	color: var(--text-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
	transition: transform 0.2s ease;
}

.tasklist-icon-wrapper:hover {
	transform: scale(1.05);
}

.tasklist-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-gray);
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.tasklist-subtitle {
	font-size: 13px;
	color: var(--text-gray);
	margin: 2px 0 0;
	font-weight: 500;
}

.tasklist-close {
	background: var(--page-bg);
	color: var(--text-gray);
	border: none;
	border-radius: 10px;
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.tasklist-close:hover {
	background: var(--border-default);
	color: var(--text-gray);
	transform: rotate(90deg);
}

.tasklist-body {
	padding: 16px;
	overflow-y: auto;
	flex: 1;
	scrollbar-width: thin;
	scrollbar-color: var(--border-default) transparent;
}

.tasklist-body::-webkit-scrollbar {
	width: 6px;
}

.tasklist-body::-webkit-scrollbar-track {
	background: transparent;
}

.tasklist-body::-webkit-scrollbar-thumb {
	background: var(--border-default);
	border-radius: 10px;
}

.tasklist-body::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

.tasklist .task-card {
	height: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.task-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	margin-bottom: 10px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.task-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 3px;
	background: var(--brand-green);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.task-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.08);
}

.task-item:hover::before {
	opacity: 1;
}

.task-item.task-completed {
	opacity: 0.65;
	background: var(--page-bg);
}

.task-item.task-completed:hover {
	opacity: 0.8;
}

.task-item-checkbox {
	flex-shrink: 0;
	margin-top: 2px;
	cursor: pointer;
}

.task-checkbox {
	width: 22px;
	height: 22px;
	border: 2px solid var(--border-default);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	background: var(--surface);
}

.task-checkbox i {
	font-size: 11px;
	color: var(--text-white);
	opacity: 0;
	transform: scale(0.3);
	transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.task-checkbox.checked {
	background: var(--brand-green);
	border-color: var(--brand-green);
}

.task-checkbox.checked i {
	opacity: 1;
	transform: scale(1);
}

.task-item:not(.task-completed) .task-checkbox:hover {
	border-color: var(--brand-green);
	background: var(--brand-green);
	color: var(--text-white);
}

.task-item-content {
	flex: 1;
	min-width: 0;
}

.task-project-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.task-project-link:hover .task-title {
	color: var(--brand-green);
}

.task-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}

.task-badge {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-gray);
	background: var(--page-bg);
	padding: 3px 8px;
	border-radius: 6px;
	letter-spacing: 0.02em;
}

.task-status-badge {
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.task-status-badge.pending {
	color: var(--brand-green);
	background: var(--page-bg);
}

.task-status-badge.completed {
	color: var(--brand-green);
	background: var(--page-bg);
}

.task-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-gray);
	margin: 0;
	line-height: 1.5;
	transition: color 0.2s ease;
	word-wrap: break-word;
}

.task-item.task-completed .task-title {
	text-decoration: line-through;
	color: var(--text-muted);
}

.task-item-actions {
	flex-shrink: 0;
	display: flex;
	gap: 6px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.task-item:hover .task-item-actions {
	opacity: 1;
}

.task-action-btn {
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	background: transparent;
	color: var(--text-muted);
	font-size: 13px;
}

.task-action-btn:hover {
	background: var(--page-bg);
	color: var(--danger-red);
	transform: scale(1.1);
}

.tasklist-footer {
	padding: 16px 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
}

.tasklist-stats {
	display: flex;
	gap: 16px;
	justify-content: center;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 10px;
	background: var(--page-bg);
	font-weight: 600;
	color: var(--text-gray);
	font-size: 14px;
}

.stat-item i {
	font-size: 16px;
	color: var(--brand-green);
}

.tasklist-loading,
.tasklist-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.tasklist-loading p,
.empty-message {
	margin: 0;
	font-size: 16px;
	color: var(--text-gray);
	font-weight: 600;
	margin-bottom: 8px;
}

.empty-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--page-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.empty-icon i {
	font-size: 36px;
	color: var(--text-muted);
}

.empty-hint {
	font-size: 13px;
	color: var(--text-muted);
	margin: 0;
}

.chat-arrow-btn {
	border-radius: 5px;
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border: 1px solid var(--border-default);
}

.poponlylogo {
	position: absolute;
	top: 40px;
	left: 40px;
}

.get_info {
	background: var(--page-bg);
	height: 100vh;
}

/* ==========================================================================
	Sign-off Page
	========================================================================== */
.signoffpage {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 300ms;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.get_info_field {
	width: 600px;
	margin: auto;
	padding: 40px;
	background: var(--surface);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 8px;
}

.signoff-content-area {
	background: var(--surface);
	padding: 30px 50px;
	max-width: 980px;
	margin: 30px auto;
}

.signoff-title {
	font-size: 20px;
	margin-bottom: 10px;
	color: var(--brand-green);
	font-weight: 600;
}

.signoff-subtitle {
	font-size: 16px;
	margin-bottom: 5px;
	font-weight: 600;
}

.signoff-paratitle {
	font-size: 18px;
	margin-top: 6px;
	color: var(--brand-green);
	font-weight: 600;
	margin-bottom: 2px;
}

.signoff-input-area {
	display: flex;
	align-items: end;
	margin: 8px 0;
}

.formlabel-sign {
	width: auto;
	padding-right: 10px;
}

#signature-pad {
	border: 2px dashed var(--border-default);
	border-radius: 5px;
	width: 100%;
	height: 200px;
	cursor: crosshair;
}

.sign-pad-area {
	margin-top: 20px;
}

#client_signature_preview img {
	max-width: 200px;
	max-height: 42px;
}

.frominput-sign {
	max-width: 100%;
}

.sign-off-gird {
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin: 0 0 12px 0;
}

.singoff-grid-item {
	width: fit-content;
}

.dashed-separator {
	border: 1px dashed var(--text-muted);
	margin: 40px auto;
}

.signoff-textarea {
	font-size: 16px;
}

.signoffpage .form-control {
	width: 100%;
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0px;
	padding: 5px 18px;
	margin-bottom: 8px;
	background: transparent;
	border-bottom: 1px solid var(--border-default);
}

.signoffpage .check-box-area {
	border: none;
	padding: 0px 0;
	margin: 2px 0;
	border-radius: 0;
	font-size: 16px;
}

.signoffpage .check-box-area:hover {
	border: none;
	color: var(--brand-green);
}

.signoffpage .col-form-label {
	line-height: 20px;
	font-size: 18px;
	color: var(--brand-green);
	padding: 0 0 6px 0;
}

.signoffpage input[type="text"]:focus,
.signoffpage input[type="email"]:focus {
	border-bottom: 1px solid var(--brand-green);
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0px;
}

.checked-item {
	list-style-type: none;
	position: relative;
	padding-left: 24px;
	margin: 0 0;
	font-size: 16px;
}

.checked-item::before {
	content: '\f00c';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	left: 3px;
	top: 6px;
	color: var(--text-white);
	width: 15px;
	height: 15px;
	text-align: center;
	border-radius: 23px;
	font-size: 8px;
	line-height: 15px;
	background: var(--brand-green);
}

.signoffpage .question__label::before {
	position: absolute;
	top: 14px;
	left: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--surface);
	box-shadow: inset 0 0 0 1px var(--border-default);
	content: "";
	transition: all 0.15s ease-in-out;
}

.signoffpage .question__label {
	position: relative;
	display: block;
	line-height: 26px;
	border-radius: 5px;
	background-color: var(--surface);
	padding: 12px 0px 5px 48px;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
}

.checked-bullet {
	list-style-type: none;
	position: relative;
	padding-left: 19px;
	margin: 4px 0;
}

.checked-bullet::before {
	content: '\f111';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	left: 8px;
	top: 5px;
	color: var(--text-muted);
	width: 5px;
	height: 5px;
	text-align: center;
	border-radius: 23px;
	font-size: 5px;
	line-height: 20px;
}

.signoff_ack_list {
	margin-left: 10px;
	margin-top: 2px;
}

.signoff_ack_list .signoff-paratitle {
	color: var(--text-secondary);
}

.empty-field {
	border: 1px solid var(--danger-red);
}

.questions-item.empty-field {
	border: 1px solid var(--danger-red);
}

.viewdata_data {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.view_signoff {
	padding: 5px 0;
}

.client_signature_view {
	width: 100px;
	margin-left: 14px;
}

.agreed-checkbox {
	position: relative;
	margin-left: 34px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.agreed-checkbox::after {
	content: '\f00c';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	left: -23px;
	top: 6px;
	color: var(--text-white);
	width: 18px;
	height: 18px;
	text-align: center;
	border-radius: 23px;
	font-size: 8px;
	line-height: 18px;
	background: var(--brand-green);
}

/* ==========================================================================
	Jobs / Filters UI
	========================================================================== */
.modern-page-header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

.modern-breadcrumb .breadcrumb {
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 14px;
}

.modern-breadcrumb .breadcrumb-item a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.3s ease;
}

.modern-breadcrumb .breadcrumb-item a:hover {
	color: var(--brand-green);
}

.modern-breadcrumb .breadcrumb-item.active {
	color: var(--black);
	font-weight: 500;
}

.modern-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
	content: "›";
	color: var(--text-muted);
	font-size: 18px;
}

.modern-jobs-section {
	animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.modern-jobs-container.djoblists {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	overflow: visible !important;
	margin: 0 !important;
	padding: 0 !important;
}

.modern-filter-card {
	background: var(--surface);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(97, 206, 112, 0.2);
	border-radius: 16px;
	padding: 1.75rem;
}

.filter-info h5 {
	color: var(--black);
	font-size: 20px;
	margin-bottom: 0.25rem;
}

.filter-info p {
	font-size: 13px;
}

.filter-group {
	display: flex;
	flex-direction: column;
}

.filter-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.filter-label i {
	color: var(--brand-green);
	font-size: 14px;
}

.search-input-wrapper {
	position: relative;
}

.modern-search-input {
	border: 2px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 0.65rem 2.75rem 0.65rem 2.75rem;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: white;
	width: 100%;
}

.modern-search-input:focus {
	border-color: var(--brand-green);
	box-shadow: 0 0 0 4px var(--brand-green);
	outline: none;
}

.modern-search-input:hover {
	border-color: var(--brand-green);
}

.modern-search-input::placeholder {
	color: var(--text-muted);
	font-weight: 400;
}

.search-input-wrapper .search-icon {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	pointer-events: none;
	transition: color 0.3s ease;
}

.modern-search-input:focus+.search-icon {
	color: var(--brand-green);
}

.filter-actions {
	display: flex;
	gap: 0.5rem;
}

.btn-clear-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: rgba(220, 53, 69, 0.1);
	color: var(--danger-red);
	border: 1px solid rgba(220, 53, 69, 0.2);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-clear-filter:hover {
	background: var(--danger-red);
	color: var(--text-white);
	border-color: var(--danger-red);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-clear-filter:active {
	transform: translateY(0);
}

.filter-results-bar {
	padding: 0.75rem 1rem;
	background: var(--surface);
	border: 1px solid rgba(97, 206, 112, 0.15);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.5rem;
}

.results-text {
	font-size: 14px;
	color: var(--text-gray);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.results-text i {
	font-size: 16px;
}

.results-text strong {
	color: var(--brand-green);
	font-weight: 700;
}

.modern-select {
	border: 2px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 0.65rem 2.5rem 0.65rem 1rem;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right 1rem center;
	background-size: 12px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.modern-select:focus {
	border-color: var(--brand-green);
	box-shadow: 0 0 0 4px var(--brand-green);
	outline: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2361ce70' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.modern-select:hover {
	border-color: var(--brand-green);
}

.modern-jobs-container #jobListContainer {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.25rem;
	margin-bottom: 2rem;
}

@media (min-width: 576px) {
	.modern-jobs-container #jobListContainer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.modern-jobs-container #jobListContainer {
		gap: 1.5rem;
	}
}

@media (min-width: 992px) {
	.modern-jobs-container #jobListContainer {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.modern-jobs-container #jobListContainer {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1400px) {
	.modern-jobs-container #jobListContainer {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.inbox-sidebar #jobListContainer,
.modern-inbox-sidebar #jobListContainer {
	display: block !important;
	grid-template-columns: none !important;
	gap: 0 !important;
}

.modern-job-card.djobitem {
	width: 100%;
	display: block !important;
	height: 100%;
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	padding: 1.5rem;
	text-decoration: none;
	color: inherit;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	margin: 0;
}

.modern-job-card.djobitem::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--brand-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-job-card.djobitem:hover {
	border-color: var(--brand-green);
}

.modern-job-card.djobitem:hover::before {
	transform: scaleX(1);
}

.djoblist-content {
	width: 100%;
	position: relative;
}

.job-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.job-id-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.75rem;
	background: var(--brand-green);
	color: var(--text-white);
	font-size: 13px;
	font-weight: 700;
	border-radius: 8px;
	border: 1px solid rgba(97, 206, 112, 0.2);
}

.job-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.75rem;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 8px;
	border: 1px solid;
	white-space: nowrap;
}

.modern-job-card .djobs-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--black);
}

.job-detail-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 13px;
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px dashed var(--border-gray);
}

.kanban-card .job-card-menu {
	position: absolute;
	top: 11px;
	right: 11px;
	z-index: 10;
}

.job-detail-item:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
}

.job-detail-item i {
	width: 16px;
	text-align: center;
	color: var(--brand-green);
	font-size: 14px;
}

.job-detail-item span {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modern-message-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.875rem;
	background: var(--brand-green);
	color: var(--text-white);
	font-size: 12px;
	font-weight: 600;
	border-radius: 50px;
	box-shadow: 0 4px 12px rgba(69, 183, 209, 0.3);
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

	0%,
	100% {
		box-shadow: 0 4px 12px rgba(69, 183, 209, 0.3);
	}

	50% {
		box-shadow: 0 4px 20px rgba(69, 183, 209, 0.5);
	}
}

.modern-message-badge i {
	font-size: 13px;
}

.modern-loading,
.modern-end-message {
	display: none !important;
	padding: 2rem;
	text-align: center;
	color: var(--text-secondary);
	font-size: 14px;
	font-weight: 500;
}

#jobListLoading.modern-loading[style*="display: flex"],
#jobListLoading.modern-loading[style*="display:flex"] {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

#jobListEnd.modern-end-message[style*="display: flex"],
#jobListEnd.modern-end-message[style*="display:flex"] {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--brand-green);
}

.modern-end-message i {
	font-size: 18px;
}

.modern-empty-state {
	text-align: center;
	padding: 4rem 2rem;
	background: var(--page-bg);
	border: 2px dashed rgba(0, 0, 0, 0.08);
	border-radius: 20px;
	margin-top: 2rem;
}

.empty-state-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto;
	background: var(--brand-green);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-white);
	font-size: 36px;
}

.modern-empty-state h5 {
	color: var(--black);
	font-weight: 600;
}

.modern-empty-state p {
	max-width: 400px;
	margin: 0 auto;
	font-size: 14px;
}

@media (max-width: 767px) {
	.modern-filter-card {
		padding: 1.25rem;
	}

	.filter-info h5 {
		font-size: 18px;
	}

	.filter-results-bar {
		padding: 0.65rem 0.875rem;
	}

	.results-text {
		font-size: 13px;
	}

	.btn-clear-filter {
		padding: 0.45rem 0.875rem;
		font-size: 12px;
	}

	.modern-job-card.djobitem {
		padding: 1.25rem;
	}

	#jobListContainer {
		gap: 1rem;
	}

	.filter-group {
		margin-bottom: 0.5rem;
	}
}

@media (max-width: 576px) {
	.filter-results-bar {
		text-align: center;
	}

	.results-text {
		flex-direction: column;
		gap: 0.25rem;
		font-size: 12px;
	}
}

.modern-no-results {
	text-align: center;
	padding: 3rem 2rem;
	background: var(--page-bg);
	border: 2px dashed rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	margin: 2rem 0;
}

.no-results-icon {
	width: 70px;
	height: 70px;
	margin: 0 auto 1rem;
	background: var(--brand-green);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	font-size: 32px;
}

.modern-no-results h6 {
	color: var(--black);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.modern-no-results p {
	color: var(--text-secondary);
	font-size: 14px;
	margin: 0;
}

/* ==========================================================================
	Modern Inbox Sidebar
	========================================================================== */
.modern-inbox-sidebar {
	background: white;
	border-radius: 16px;
	padding: 1.5rem;
	height: calc(100vh - 105px);
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-header {
	flex-shrink: 0;
	padding-bottom: 1rem;
	border-bottom: 2px solid rgba(0, 0, 0, 0.05);
	margin-bottom: 1rem;
}

.modern-back-btn {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--brand-green);
	border: 1px solid rgba(97, 206, 112, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-white);
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 16px;
}

.modern-back-btn:hover {
	background: var(--brand-green);
	color: var(--text-white);
	transform: translateX(-3px);
	box-shadow: 0 4px 12px var(--brand-green);
}

.sidebar-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--black);
	line-height: 1.2;
}

.sidebar-subtitle {
	font-size: 12px;
	color: var(--text-secondary);
	margin-top: 2px;
}

.sidebar-filters {
	flex-shrink: 0;
}

.filter-label-sm {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.filter-label-sm i {
	color: var(--brand-green);
	font-size: 12px;
}

.modern-search-wrapper {
	position: relative;
}

.search-icon-left {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	font-size: 14px;
	pointer-events: none;
	z-index: 1;
	transition: color 0.3s ease;
}

.modern-sidebar-search {
	padding-left: 2.75rem;
	border: 2px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-sidebar-search:focus {
	border-color: var(--brand-green);
	box-shadow: 0 0 0 3px var(--brand-green);
	outline: none;
}

.modern-sidebar-search:focus+.search-icon-left,
.modern-sidebar-search:focus~.search-icon-left {
	color: var(--brand-green);
}

.modern-select-sm {
	border: 2px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: 0.5rem 2.25rem 0.5rem 0.75rem;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
	background-size: 10px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.modern-select-sm:focus {
	outline: none;
}

.modern-jobs-list {
	flex: 1;
	overflow-y: auto;
	margin: 0 -1.5rem;
	padding: 0 1.5rem;
	scrollbar-width: thin;
	scrollbar-color: var(--brand-green) transparent;
}

.modern-jobs-list::-webkit-scrollbar {
	width: 6px;
}

.modern-jobs-list::-webkit-scrollbar-track {
	background: transparent;
}

.modern-jobs-list::-webkit-scrollbar-thumb {
	background: var(--brand-green);
	border-radius: 10px;
}

.modern-jobs-list::-webkit-scrollbar-thumb:hover {
	background: var(--brand-green);
	color: var(--text-white);
}

.modern-job-item {
	display: block;
	padding: 1rem;
	border-radius: 12px;
	margin-bottom: 0.75rem;
	text-decoration: none;
	color: inherit;
	background: white;
	border: 1px solid var(--border-gray);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.modern-job-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: var(--brand-green);
	transform: scaleY(0);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-job-item:hover {
	background: var(--page-bg);
	color: var(--text-white);
	border: 1px solid var(--brand-green);
}

.modern-job-item:hover::before {
	transform: scaleY(1);
}

.modern-job-item.is-active {
	background: var(--page-bg);
	border: 1px solid var(--brand-green);
	color: var(--text-white);
}

.modern-job-item.is-active::before {
	transform: scaleY(1);
}

.modern-job-item-content {
	position: relative;
}

.modern-job-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.modern-job-id {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.6rem;
	background: var(--surface);
	color: var(--dark-text);
	font-size: 14px;
	font-weight: 700;
	border-radius: 6px;
	border: 1px solid rgba(97, 206, 112, 0.25);
}

.modern-unread-badge {
	display: inline-flex;
	position: absolute;
	bottom: 12px;
	right: 12px;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 0.4rem;
	background: var(--danger-red);
	color: var(--text-white);
	font-size: 11px;
	font-weight: 700;
	border-radius: 50px;
	animation: pulse 2s ease-in-out infinite;
}

.modern-job-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.5rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modern-status-tag {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 6px;
	border: 1px solid;
	margin-bottom: 0.75rem;
	position: absolute;
	top: 0;
	right: 0;
}

.modern-job-details {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.modern-job-detail-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 12px;
	color: var(--text-secondary);
	border-bottom: 1px dashed var(--border-gray);
	padding-bottom: 4px;
}

.modern-job-detail-row i {
	width: 14px;
	text-align: center;
	color: var(--brand-green);
	font-size: 12px;
	flex-shrink: 0;
}

.modern-job-detail-row span {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 991px) {
	.modern-inbox-sidebar {
		height: auto;
		max-height: none;
	}

	.modern-jobs-list {
		max-height: 60vh;
	}
}

.modern-project-sidebar {
	padding: 1.5rem;
	background: white;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	height: calc(100vh - 105px);
	position: sticky;
	top: 20px;
	overflow-y: auto;
}

.view-brief-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 8px 20px;
	background: white;
	color: var(--brand-green);
	border: 2px solid var(--brand-green);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.view-brief-btn i {
	font-size: 13px;
}

.modern-project-details {
	padding: 1.25rem;
	background: white;
	border: 1px solid var(--border-default);
	border-radius: 12px;
	margin-bottom: 1.25rem;
}

.project-detail-item {
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--border-default);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.project-detail-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.project-detail-item:first-child {
	padding-top: 0;
}

.detail-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.detail-label i {
	font-size: 13px;
	color: var(--brand-green);
	width: 16px;
	text-align: center;
}

.detail-value {
	font-size: 14px;
	font-weight: 500;
	color: var(--black);
	padding-left: 26px;
}

.status-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.875rem;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid;
}

.deadline-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.875rem;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid var(--border-default);
}

.modern-add-task-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.875rem;
	background: var(--brand-green);
	color: var(--text-white);
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 8px rgba(97, 206, 112, 0.2);
	margin-bottom: 1.25rem;
}

.modern-attachments-section {
	background: white;
	border: 1px solid var(--border-default);
	border-radius: 12px;
	overflow: hidden;
}

.attachments-header {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 1.25rem;
	background: var(--page-bg);
	border-bottom: 1px solid var(--border-default);
}

.attachments-header i {
	font-size: 16px;
	color: var(--brand-green);
}

.attachments-header h6 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--black);
}

.attachments-body {
	padding: 1rem;
	max-height: 280px;
	overflow-y: auto;
}

.attachments-body::-webkit-scrollbar {
	width: 6px;
}

.attachments-body::-webkit-scrollbar-track {
	background: var(--page-bg);
	border-radius: 10px;
}

.attachments-body::-webkit-scrollbar-thumb {
	background: var(--brand-green);
	border-radius: 10px;
}

.attachments-body::-webkit-scrollbar-thumb:hover {
	background: var(--brand-green);
	color: var(--text-white);
}

.modern-project-sidebar::-webkit-scrollbar {
	width: 8px;
}

.modern-project-sidebar::-webkit-scrollbar-track {
	background: var(--page-bg);
	border-radius: 10px;
}

.modern-project-sidebar::-webkit-scrollbar-thumb {
	background: var(--brand-green);
	border-radius: 10px;
}

.modern-project-sidebar::-webkit-scrollbar-thumb:hover {
	background: var(--brand-green);
	color: var(--text-white);
}