/* =========================================================
   Facebook-like smooth look & feel — override only
   No new classes, no renames. Works on top of tabler.css
   ========================================================= */

:root, [data-bs-theme=light] {
	/* Softer, flatter surfaces */
	--tblr-body-bg: #f0f2f5;
	--tblr-body-bg-rgb: 240, 242, 245;
	--tblr-bg-surface: #ffffff;
	--tblr-bg-surface-secondary: #f0f2f5;
	--tblr-bg-surface-tertiary: #f7f8fa;

	/* Slightly softer primary blue */
	--tblr-primary: #1877f2;
	--tblr-primary-rgb: 24, 119, 242;
	--tblr-primary-fg: #ffffff;
	--tblr-primary-lt: #e7f0fe;
	--tblr-primary-lt-rgb: 231, 240, 254;

	/* Softer neutrals */
	--tblr-secondary: #65676b;
	--tblr-secondary-rgb: 101, 103, 107;
	--tblr-muted: #65676b;
	--tblr-muted-rgb: 101, 103, 107;
	--tblr-border-color: #e4e6eb;
	--tblr-border-color-translucent: rgba(0, 0, 0, 0.06);
	--tblr-border-dark-color: #ccd0d5;

	/* Rounded corners everywhere */
	--tblr-border-radius: 0.5rem;
	--tblr-border-radius-sm: 0.375rem;
	--tblr-border-radius-lg: 0.75rem;
	--tblr-border-radius-xl: 1rem;
	--tblr-border-radius-xxl: 1.5rem;
	--tblr-border-radius-pill: 100rem;

	/* Softer, more diffuse shadows */
	--tblr-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
	--tblr-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--tblr-box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
	--tblr-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.08);
	--tblr-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.10);
	--tblr-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12);

	/* Smooth transitions */
	--tblr-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Base typography & scrollbar ---------- */
body {
	color: #050505;
	font-size: 0.9375rem;
	line-height: 1.5;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Softer, thinner scrollbars */
*::-webkit-scrollbar {
	width: 0.5rem;
	height: 0.5rem;
}
*::-webkit-scrollbar-thumb {
	border: 0;
	border-radius: 1rem;
	box-shadow: inset 0 0 0 1rem rgba(0, 0, 0, 0.15);
}
*:hover::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 0 1rem rgba(0, 0, 0, 0.28);
}

/* ---------- Cards — flat, rounded, subtle shadow ---------- */
.card {
	border: none;
	border-radius: var(--tblr-border-radius-lg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	background-color: #ffffff;
}
.card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}
a.card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}
.card-header {
	border-bottom: 1px solid #e4e6eb;
	background: transparent;
	font-weight: 600;
}
.card-footer {
	border-top: 1px solid #e4e6eb;
	background: transparent;
}
.card-body {
	color: #050505;
}

/* ---------- Buttons — rounded, soft, smooth ---------- */
.btn {
	border-radius: var(--tblr-border-radius);
	font-weight: 600;
	letter-spacing: 0;
	transition: background-color 0.15s ease, box-shadow 0.15s ease,
		transform 0.05s ease, color 0.15s ease;
}
.btn:active {
	transform: scale(0.98);
}
.btn-primary {
	background-color: #1877f2;
	border-color: #1877f2;
	color: #ffffff;
	box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: #166fe0;
	border-color: #166fe0;
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn-secondary {
	background-color: #e4e6eb;
	border-color: #e4e6eb;
	color: #050505;
	box-shadow: none;
}
.btn-secondary:hover,
.btn-secondary:focus {
	background-color: #d8dadf;
	border-color: #d8dadf;
	color: #050505;
	box-shadow: none;
}
.btn-outline-primary {
	color: #1877f2;
	border-color: #1877f2;
	background: transparent;
}
.btn-outline-primary:hover {
	background-color: #1877f2;
	border-color: #1877f2;
	color: #ffffff;
}
.btn-link {
	color: #1877f2;
	box-shadow: none;
}
.btn-link:hover {
	color: #166fe0;
	text-decoration: underline;
}

/* ---------- Forms — rounded, soft, no harsh shadow ---------- */
.form-control,
.form-select {
	border-radius: var(--tblr-border-radius);
	border: 1px solid #ccd0d5;
	background-color: #f0f2f5;
	color: #050505;
	box-shadow: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.form-control:focus,
.form-select:focus {
	border-color: #1877f2;
	background-color: #ffffff;
	box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.15);
}
.form-control::placeholder {
	color: #8d949e;
}
.form-label {
	font-weight: 600;
	color: #050505;
	font-size: 0.875rem;
}
.input-group-text {
	background-color: #f0f2f5;
	border-color: #ccd0d5;
	border-radius: var(--tblr-border-radius);
	color: #65676b;
}
.form-check-input {
	border-color: #ccd0d5;
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.form-check-input:checked {
	background-color: #1877f2;
	border-color: #1877f2;
}
.form-check-input:focus {
	box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2);
}

/* ---------- Tables — airy, soft headers ---------- */
.table thead th {
	background: transparent;
	color: #65676b;
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: none;
	letter-spacing: 0;
	border-bottom: 1px solid #e4e6eb;
}
.table > :not(caption) > * > * {
	border-bottom-color: #e4e6eb;
	padding: 0.85rem 0.75rem;
}
.table-hover > tbody > tr:hover > * {
	background-color: #f2f3f5;
}
.table-striped > tbody > tr:nth-of-type(even) > * {
	background-color: #f7f8fa;
}

.table td{
	padding: 5px 10px !important;
}

/* ---------- Dropdowns — rounded, soft shadow ---------- */
.dropdown-menu {
	border: none;
	border-radius: var(--tblr-border-radius-lg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	padding: 0.5rem;
}
.dropdown-item {
	border-radius: var(--tblr-border-radius-sm);
	padding: 0.5rem 0.75rem;
	font-weight: 500;
	transition: background-color 0.15s ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
	background-color: #f0f2f5;
	color: #050505;
}
.dropdown-item.active,
.dropdown-item:active {
	background-color: #e7f0fe;
	color: #1877f2;
}

/* ---------- Badges & pills ---------- */
.badge {
	font-weight: 600;
	border-radius: var(--tblr-border-radius-pill);
	padding: 0.25em 0.6em;
}
.badge-pill {
	border-radius: 100rem;
}

/* ---------- Nav / tabs ---------- */
.nav-link {
	color: #65676b;
	font-weight: 600;
	border-radius: var(--tblr-border-radius);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover,
.nav-link:focus {
	color: #1877f2;
	background-color: #f0f2f5;
	text-decoration: none;
}
.nav-link.active {
	color: #1877f2;
	background-color: transparent;
}
.nav-tabs {
	border-bottom: 1px solid #e4e6eb;
}
.nav-tabs .nav-link.active {
	color: #1877f2;
	border-color: transparent transparent #1877f2;
	border-bottom-width: 3px;
	background: transparent;
	font-weight: 600;
}
.nav-pills .nav-link.active {
	background-color: #e7f0fe;
	color: #1877f2;
}

/* ---------- Alerts — soft, rounded, left accent ---------- */
.alert {
	border: none;
	border-radius: var(--tblr-border-radius-lg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	border-left: 4px solid currentColor;
}
.alert-primary { background-color: #e7f0fe; color: #1877f2; }
.alert-success { background-color: #e7f6ec; color: #1a7f37; }
.alert-danger  { background-color: #fdeaea; color: #d93025; }
.alert-warning { background-color: #fff4e5; color: #b25e00; }
.alert-info    { background-color: #e7f3fe; color: #0b5ed7; }

/* ---------- Modal — rounded, soft ---------- */
.modal-content {
	border: none;
	border-radius: var(--tblr-border-radius-xl);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.modal-header {
	border-bottom: 1px solid #e4e6eb;
	font-weight: 600;
}
.modal-footer {
	border-top: 1px solid #e4e6eb;
}

/* ---------- List group — soft rows ---------- */
.list-group-item {
	border-color: #e4e6eb;
	transition: background-color 0.15s ease;
}
.list-group-item:hover {
	background-color: #f7f8fa;
}
.list-group-item.active {
	background-color: #e7f0fe;
	border-color: #e7f0fe;
	color: #1877f2;
}

/* ---------- Progress — rounded, smooth ---------- */
.progress {
	border-radius: var(--tblr-border-radius-pill);
	background-color: #e4e6eb;
}
.progress-bar {
	background-color: #1877f2;
	border-radius: var(--tblr-border-radius-pill);
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Pagination — round, soft ---------- */
.page-link {
	border-radius: var(--tblr-border-radius);
	border-color: transparent;
	color: #65676b;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.page-link:hover {
	background-color: #e4e6eb;
	color: #050505;
}
.page-item.active .page-link {
	background-color: #1877f2;
	border-color: #1877f2;
	color: #ffffff;
}

/* ---------- Avatars — rounder, softer shadow ---------- */
.avatar {
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.avatar-rounded {
	border-radius: 50%;
}

/* ---------- Chat bubbles — Facebook Messenger style ---------- */
.chat-content {
	height: 520px;
	background-color: #ffffff;
	border-radius: var(--tblr-border-radius-lg);
	padding: 1rem;
	overflow-y: auto;
}

.chat-content-leftside .chat-left-msg {
	background-color: #f0f2f5;
	color: #050505;
	border-radius: 18px;
	border-bottom-left-radius: 4px;
	padding: 0.7rem 0.9rem;
	max-width: 420px;
	font-size: 0.875rem;
	line-height: 1.45;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	word-break: break-word;
	overflow-wrap: anywhere;
}

.chat-content-rightside .chat-right-msg {
	background-color: #1877f2;
	color: #ffffff;
	border-radius: 18px;
	border-bottom-right-radius: 4px;
	padding: 0.7rem 0.9rem;
	max-width: 480px;
	float: right;
	font-size: 0.875rem;
	line-height: 1.45;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* Chat toggle button — circular, soft */
.chat-toggle-btn {
	width: 40px;
	height: 40px;
	line-height: 40px;
	margin-right: 15px;
	text-align: center;
	font-size: 20px;
	color: #65676b;
	border-radius: 50%;
	cursor: pointer;
	background-color: #f0f2f5;
	border: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.chat-toggle-btn:hover {
	background-color: #e4e6eb;
	color: #050505;
}

/* Message ID bubble — soft pill */
.message_id {
	width: auto;
	background-color: rgba(0, 0, 0, 0.06);
	color: #65676b;
	font-size: 11px;
	border-radius: 10px;
	position: absolute;
	padding: 3px 8px;
	bottom: 5px;
	right: 5px;
}

/* ---------- Error text — soft pill ---------- */
.error {
	color: #d93025;
	background-color: #fdeaea;
	padding: 0.15rem 0.6rem;
	border-radius: var(--tblr-border-radius-pill);
	font-size: 12px;
	font-weight: 600;
}

/* ---------- Navbar — flat, clean ---------- */
.navbar {
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	min-height: 3.5rem;
}
.navbar-brand {
	font-weight: 700;
	color: #1877f2;
}

/* ---------- Links ---------- */
a {
	color: #1877f2;
	transition: color 0.15s ease;
}
a:hover {
	color: #166fe0;
}

/* ---------- Headings — tighter, modern ---------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-weight: 700;
	color: #050505;
	letter-spacing: -0.01em;
}

/* ---------- Focus rings — soft blue ---------- */
:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.35);
	border-radius: var(--tblr-border-radius-sm);
}

/* ---------- Layout padding helper ---------- */
.layout_padding {
	margin-bottom: 20px;
}

/* ---------- Select2 fix ---------- */
.select2-dropdown.increasedzindexclass {
	z-index: 999999;
	border-radius: var(--tblr-border-radius-lg);
	border: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ---------- Table header sizing tweak (kept from original) ---------- */
thead > tr > th {
	font-size: 13px !important;
	padding-bottom: 12px;
	font-weight: 600;
	color: #65676b;
}