/*Write your custom css in this file.*/

/* Apply modern Thai font globally */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');

/* CSS custom property for consistent font usage */
:root {
	--thai-font-family: 'Noto Sans Thai', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html, body {
	font-family: var(--thai-font-family);
}

/* ===========================================
   Apply Thai font to all common elements
   =========================================== */

/* General elements */
*, *::before, *::after {
	font-family: inherit;
}

h1, h2, h3, h4, h5, h6,
p, span, a, label, div,
button, input, textarea, select,
th, td, li, dt, dd {
	font-family: var(--thai-font-family);
}

/* Form elements */
input, textarea, select, button,
.form-control, .form-select,
.btn, .badge, .alert {
	font-family: var(--thai-font-family);
}

/* ===========================================
   Select2 dropdown component
   =========================================== */
.select2-container,
.select2-container *,
.select2-choice,
.select2-choices,
.select2-search input,
.select2-results,
.select2-results li,
.select2-container .select2-choice,
.select2-container .select2-choices,
.select2-container .select2-choices .select2-search-field input,
.select2-container-multi .select2-choices .select2-search-field input,
.select2-selection,
.select2-selection__rendered,
.select2-search__field,
.select2-results__option {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   DataTables component
   =========================================== */
.dataTables_wrapper,
.dataTables_wrapper *,
table.dataTable,
table.dataTable th,
table.dataTable td,
.dataTables_info,
.dataTables_length,
.dataTables_filter,
.dataTables_paginate,
.dataTables_processing,
div.dt-buttons,
.dt-button {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   Summernote rich text editor
   =========================================== */
.note-editor,
.note-editor *:not([class^="note-icon"]):not([class*=" note-icon"]),
.note-editable,
.note-toolbar,
.note-btn,
.note-dropdown-menu,
.note-modal,
.note-modal *,
.note-placeholder {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   Magnific Popup (lightbox)
   =========================================== */
.mfp-container,
.mfp-container *,
.mfp-content,
.mfp-title,
.mfp-counter,
.mfp-close {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   FullCalendar component
   =========================================== */
.fc,
.fc *,
.fc-toolbar,
.fc-toolbar *,
.fc-header-toolbar,
.fc-button,
.fc-event,
.fc-event-title,
.fc-daygrid-event,
.fc-list-event {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   Dropzone file upload
   =========================================== */
.dropzone,
.dropzone *,
.dz-message,
.dz-filename,
.dz-details {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   Bootstrap components
   =========================================== */
.modal,
.modal *,
.modal-title,
.modal-body,
.modal-footer,
.tooltip,
.tooltip-inner,
.popover,
.popover-body,
.dropdown-menu,
.dropdown-item,
.nav-link,
.navbar,
.card,
.card-title,
.card-body,
.list-group-item,
.breadcrumb,
.breadcrumb-item,
.pagination,
.page-link,
.alert,
.toast,
.toast-body {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   Gantt chart
   =========================================== */
.gantt,
.gantt *,
.gantt-container,
.bar-label,
.bar-wrapper {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   At.js mention/autocomplete
   =========================================== */
.atwho-view,
.atwho-view *,
.atwho-view ul li {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   Date/Time pickers
   =========================================== */
.datepicker,
.datepicker *,
.datepicker table,
.datepicker td,
.datepicker th,
.bootstrap-timepicker,
.bootstrap-timepicker * {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   Chart.js (labels and tooltips)
   =========================================== */
.chartjs-tooltip,
.chartjs-tooltip * {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   App-specific components
   =========================================== */
.sidebar,
.sidebar *,
.topbar,
.topbar *,
.left-menu,
.left-menu *,
.page-title,
.panel,
.panel *,
.widget,
.widget *,
.timeline,
.timeline *,
.activity-log,
.activity-log *,
.comment,
.comment *,
.task-card,
.task-card *,
.project-card,
.project-card *,
.invoice-preview,
.invoice-preview * {
	font-family: var(--thai-font-family) !important;
}

/* ===========================================
   Print styles
   =========================================== */
@media print {
	*, *::before, *::after {
		font-family: var(--thai-font-family) !important;
	}
}

/* ===========================================
   Kanban task ID badge
   =========================================== */
.kanban-task-id {
	display: inline-block;
	background-color: rgba(102, 144, 244, 0.12);
	color: #6690F4;
	padding: 1px 6px;
	border-radius: 3px;
	font-weight: 600;
	font-size: 11px;
	line-height: 1.4;
	vertical-align: middle;
	letter-spacing: 0.3px;
}

/* ===========================================
   Colorful File Type Icons
   =========================================== */

/* ---- Compact file card (large variant) — timeline, comments, previews ---- */
.file-card-compact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 8px;
	border-radius: 10px;
	border: 1px solid;
	cursor: pointer;
	transition: all 250ms ease;
	max-width: 300px;
	min-width: 140px;
}

.file-card-compact:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	filter: none !important;
}

.file-card-icon {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.file-card-icon-svg {
	width: 18px !important;
	height: 18px !important;
	color: #fff !important;
	stroke: #fff !important;
	margin-top: 0 !important;
	pointer-events: none;
}

.file-card-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 1px;
}

.file-card-ext {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	line-height: 1.2;
}

.file-card-name {
	font-size: 12px;
	font-weight: 400;
	color: #5a6c7d;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
	line-height: 1.3;
}

/* Message area compact cards */
.message-images .file-card-compact {
	max-width: 200px;
	min-width: 100px;
	padding: 6px 10px 6px 6px;
}

.message-images .file-card-icon {
	width: 28px;
	height: 28px;
	min-width: 28px;
	border-radius: 6px;
}

.message-images .file-card-icon-svg {
	width: 14px !important;
	height: 14px !important;
}

.message-images .file-card-ext {
	font-size: 10px;
}

.message-images .file-card-name {
	font-size: 10px;
	max-width: 130px;
}

/* Timeline images compact cards */
.timeline-images .file-card-compact {
	max-width: 260px;
}

/* Legacy support: keep old file-mockup from breaking if rendered */
.timeline-images .file-mockup.file-type-icon-card {
	display: none !important;
}

/* Small file type badge — used in file lists, grids, file manager */
.file-type-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.file-type-badge:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.file-type-badge svg {
	width: 14px !important;
	height: 14px !important;
	margin-top: 0 !important;
	stroke: #fff !important;
}

/* File-type badge inside the other-saved-file-container */
.other-saved-file-container .file-type-badge {
	margin-top: 14px;
}

/* File manager icon wrapper adjustment for badge */
.icon-wrapper .file-type-badge {
	padding: 4px 8px;
	font-size: 10px;
}

/* ===========================================
   KB Article File Attachment Cards
   =========================================== */

.kb-file-attachments {
	background: #f9fafb;
	border: 1px solid #e8ecf1;
	border-radius: 12px;
	padding: 20px;
	margin-top: 10px;
}

.kb-file-attachments-header {
	font-weight: 600;
	font-size: 14px;
	color: #4e5e6a;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.kb-file-attachments-header .badge {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
}

.kb-file-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kb-file-card {
	background: #fff;
	border-radius: 10px;
	border: 1px solid #e8ecf1;
	border-left-width: 4px;
	overflow: hidden;
	transition: all 250ms ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.kb-file-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.kb-file-card-body {
	display: flex;
	align-items: center;
	padding: 14px 16px;
	gap: 14px;
}

.kb-file-icon-area {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kb-file-icon-area .file-type-badge {
	padding: 5px 8px;
	font-size: 9px;
	gap: 3px;
	box-shadow: none;
}

.kb-file-icon-area .file-type-badge svg {
	width: 12px !important;
	height: 12px !important;
}

.kb-file-info {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.kb-file-name {
	font-weight: 600;
	font-size: 13.5px;
	color: #2d3748;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}

.kb-file-meta {
	font-size: 12px;
	color: #8a94a6;
	margin-top: 2px;
	letter-spacing: 0.3px;
}

.kb-file-actions {
	flex-shrink: 0;
	display: flex;
	gap: 6px;
}

.kb-file-btn {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 200ms ease;
	color: #8a94a6;
	text-decoration: none !important;
}

.kb-file-btn:hover {
	color: #fff;
}

.kb-file-btn svg {
	margin-top: 0 !important;
}

.kb-file-btn-preview {
	background: #f0f2f5;
}

.kb-file-btn-preview:hover {
	background: #6690F4;
}

.kb-file-btn-download {
	background: #f0f2f5;
}

.kb-file-btn-download:hover {
	background: #00b393;
}

.kb-download-all {
	margin-top: 14px;
	text-align: center;
}

.kb-download-all .btn {
	letter-spacing: 0.3px;
}

/* ===========================================
   Modern File Attachment UI — Global Overhaul
   =========================================== */

/* ——————————————————————————
   1. Dropzone Upload Area
   —————————————————————————— */
.dropzone {
	border: 2px dashed rgba(102, 144, 244, 0.35) !important;
	border-radius: 16px !important;
	background: linear-gradient(135deg, rgba(102, 144, 244, 0.04) 0%, rgba(42, 194, 212, 0.04) 100%) !important;
	min-height: 160px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1) !important;
	cursor: pointer;
	position: relative;
}

.dropzone:hover {
	border-color: rgba(102, 144, 244, 0.6) !important;
	background: linear-gradient(135deg, rgba(102, 144, 244, 0.08) 0%, rgba(42, 194, 212, 0.06) 100%) !important;
	box-shadow: 0 4px 24px rgba(102, 144, 244, 0.12) !important;
	transform: translateY(-2px);
}

.dropzone.dz-drag-hover {
	border-color: #6690F4 !important;
	border-style: solid !important;
	background: linear-gradient(135deg, rgba(102, 144, 244, 0.14) 0%, rgba(42, 194, 212, 0.10) 100%) !important;
	box-shadow: 0 8px 32px rgba(102, 144, 244, 0.2) !important;
	transform: scale(1.01);
}

.dropzone .dz-message {
	margin: 0 !important;
	text-align: center;
	color: #5a6c7d;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	padding: 20px 15px;
}

/* Custom upload message layout */
.dz-upload-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	position: relative;
	padding-top: 56px;
}

.dz-upload-message::before {
	content: '';
	display: block;
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, #6690F4 0%, #2ac2d4 100%);
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(102, 144, 244, 0.3);
	transition: transform 300ms ease, box-shadow 300ms ease;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.dropzone:hover .dz-upload-message::before {
	transform: translateX(-50%) scale(1.1);
	box-shadow: 0 8px 28px rgba(102, 144, 244, 0.4);
}

.dz-upload-icon {
	width: 28px !important;
	height: 28px !important;
	z-index: 1;
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
	transition: transform 300ms ease;
}

.dropzone:hover .dz-upload-icon {
	transform: translateX(-50%) translateY(-2px);
}

.dz-upload-text {
	display: block;
	margin-top: 12px;
	color: #6b7c8d;
	font-size: 13.5px;
	font-weight: 500;
}

/* Hide the generic ::before when we have SVG message */
.dropzone .dz-message::before,
.dropzone .dz-message::after {
	display: none !important;
}

/* ——————————————————————————
   2. File Upload Preview Row (Multi-file uploader)
   —————————————————————————— */
#file-upload-dropzone-scrollbar {
	padding: 8px 0;
}

#uploaded-file-previews .box {
	background: #fff;
	border: 1px solid #e8ecf1;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: all 250ms ease;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

#uploaded-file-previews .box:hover {
	border-color: #d1d9e6;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

#uploaded-file-previews .box .preview {
	flex-shrink: 0;
	width: 52px !important;
	height: 52px;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, #f0f2f7 0%, #e8ecf1 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

#uploaded-file-previews .box .preview .upload-thumbnail-sm {
	width: 52px !important;
	height: 52px !important;
	object-fit: cover;
	border-radius: 10px;
	background-size: 28px;
	background-color: #f0f2f7;
}

#uploaded-file-previews .box .box-content {
	flex: 1;
	min-width: 0;
}

#uploaded-file-previews .box .box-content .name {
	font-weight: 600;
	font-size: 13px;
	color: #2d3748;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#uploaded-file-previews .box .box-content .size {
	font-size: 12px;
	color: #8a94a6;
	font-weight: 400;
}

#uploaded-file-previews .box .box-content .clearfix {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Modernize the remove button in upload preview */
#uploaded-file-previews .box [data-dz-remove] {
	width: 30px !important;
	height: 30px !important;
	min-width: 30px;
	border-radius: 8px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: #fef2f2 !important;
	border: 1px solid #fee2e2 !important;
	color: #ef4444 !important;
	transition: all 200ms ease;
	margin: 0 !important;
	float: none !important;
}

#uploaded-file-previews .box [data-dz-remove]:hover {
	background: #ef4444 !important;
	border-color: #ef4444 !important;
	color: #fff !important;
	transform: scale(1.05);
}

/* Upload progress bar — modern style */
#uploaded-file-previews .progress,
.upload-progress-sm {
	height: 4px !important;
	border-radius: 4px !important;
	background: #e8ecf1 !important;
	overflow: hidden;
	width: auto !important;
}

#uploaded-file-previews .progress-bar,
.upload-progress-sm .progress-bar {
	border-radius: 4px !important;
	transition: width 400ms ease !important;
}

.progress-bar-success {
	background: linear-gradient(90deg, #10b981, #34d399) !important;
}

/* Description field in upload */
#uploaded-file-previews .description-field {
	border-radius: 8px !important;
	border: 1px solid #e8ecf1 !important;
	padding: 8px 12px !important;
	font-size: 13px !important;
	margin-top: 8px;
	transition: border-color 200ms ease;
}

#uploaded-file-previews .description-field:focus {
	border-color: #6690F4 !important;
	box-shadow: 0 0 0 3px rgba(102, 144, 244, 0.1) !important;
}

/* ——————————————————————————
   3. Saved File Grid Cards (file_list.php)
   —————————————————————————— */
.file-grid-view-container {
	padding: 6px !important;
}

.saved-file-item-container {
	border-radius: 12px !important;
	border: 1px solid #e8ecf1;
	overflow: hidden;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	background: #fff;
}

.saved-file-item-container:hover {
	border-color: #cdd5e0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
	transform: translateY(-2px);
}

.saved-file-item-container .edit-image-file {
	height: 80px !important;
	border-radius: 11px !important;
	border: none !important;
	position: relative;
	overflow: hidden;
}

/* Image file container */
.saved-file-item-container .edit-image-file[style*="background-image"] {
	background-size: cover !important;
	background-position: center !important;
}

/* Non-image file container */
.saved-file-item-container.saved-recording-file .edit-image-file {
	background-color: #f0f4f8 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* File extension badge top-left */
.saved-file-info {
	position: absolute !important;
	width: auto !important;
	min-width: 36px;
	background: rgba(107, 114, 128, 0.85) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-top-left-radius: 11px !important;
	border-bottom-right-radius: 10px !important;
	border-top-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	top: 0 !important;
	left: 0 !important;
	color: #fff;
	z-index: 2;
	line-height: 22px !important;
	text-align: center;
	padding: 1px 8px !important;
	font-size: 10px !important;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Delete button on saved files */
.edit-image-file .delete-saved-file {
	top: 4px !important;
	right: 4px !important;
	left: auto !important;
	min-width: 24px !important;
	width: 24px !important;
	height: 24px;
	padding: 0 !important;
	display: none;
	position: absolute;
	border-radius: 8px !important;
	background: rgba(0, 0, 0, 0.5) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff !important;
	border: none !important;
	cursor: pointer;
	z-index: 3;
	transition: all 200ms ease;
	text-align: center;
	line-height: 24px;
}

.edit-image-file .delete-saved-file:hover {
	background: #ef4444 !important;
	border-color: #ef4444 !important;
	transform: scale(1.1);
}

.edit-image-file:hover .delete-saved-file,
.edit-image-file:hover .copy-file-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* The other-saved-file-container for non-image files */
.other-saved-file-container {
	position: relative !important;
	top: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
	border: none !important;
	background: transparent !important;
	padding: 8px !important;
	border-radius: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* Copy link button styling */
.edit-image-file .copy-file-link {
	bottom: 4px !important;
	right: 4px !important;
	left: auto !important;
	top: auto !important;
	min-width: 24px !important;
	width: 24px !important;
	height: 24px;
	padding: 0 !important;
	border-radius: 8px !important;
	background: rgba(0, 0, 0, 0.5) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff !important;
	border: none !important;
	z-index: 3;
	line-height: 24px;
	text-align: center;
}

.edit-image-file .copy-file-link:hover {
	background: #6690F4 !important;
}

/* ——————————————————————————
   4. Post / Comment Dropzone Preview
   —————————————————————————— */
.post-file-dropzone-scrollbar {
	padding: 8px 0;
}

.post-file-previews {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 12px !important;
	border-top: 1px solid #e8ecf1 !important;
	border-color: #e8ecf1 !important;
}

.post-file-upload-row {
	flex-shrink: 0;
}

.post-file-upload-row .preview {
	width: 72px !important;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	background: linear-gradient(135deg, #f0f2f7, #e8ecf1);
	border: 1px solid #e0e5ed;
	transition: all 200ms ease;
}

.post-file-upload-row .preview:hover {
	border-color: #c5cdd8;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.post-file-upload-row .preview .upload-thumbnail-sm {
	width: 72px !important;
	height: 72px !important;
	object-fit: cover;
	border-radius: 9px;
	background-size: 32px;
}

.post-file-upload-row .preview .delete {
	width: 22px !important;
	height: 22px !important;
	margin-left: 0 !important;
	margin-top: 0 !important;
	font-size: 14px !important;
	line-height: 22px !important;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	position: absolute;
	top: 4px;
	right: 4px;
	left: auto !important;
	text-align: center;
	opacity: 0;
	transition: opacity 200ms ease;
}

.post-file-upload-row .preview:hover .delete {
	opacity: 1;
}

.post-file-upload-row .preview .delete:hover {
	background: #ef4444 !important;
}

/* Post dropzone progress */
.post-file-upload-row .upload-progress-sm {
	width: auto !important;
	margin: 4px 0 0 0 !important;
	height: 3px !important;
	border-radius: 3px !important;
}

/* ——————————————————————————
   6. File Manager Grid Items
   —————————————————————————— */
.icon-wrapper {
	transition: all 250ms ease;
}

.icon-wrapper:hover {
	transform: translateY(-2px);
}

/* ——————————————————————————
   7. Sortable File List
   —————————————————————————— */
.sortable-file-row {
	background: #fff;
	border: 1px solid #e8ecf1;
	border-radius: 10px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	transition: all 200ms ease;
}

.sortable-file-row:hover {
	border-color: #d1d9e6;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sortable-file-row .sortable-file {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid #e8ecf1;
}

.sortable-file-row .move-icon {
	color: #bcc3ce;
	cursor: grab;
	padding-right: 10px;
}

.sortable-file-row .move-icon:active {
	cursor: grabbing;
}

/* Sortable drag states */
.sortable-chosen {
	background: #f8fafc !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important;
	border-color: #6690F4 !important;
}

.sortable-ghost {
	opacity: 0.4 !important;
}

/* ——————————————————————————
   8. File Preview / View Page
   —————————————————————————— */
.file-manager-preview-section .text-white {
	color: #4e5e6a !important;
	border: 1px solid #e8ecf1 !important;
	border-radius: 12px !important;
	padding: 20px !important;
	background: #f9fafb;
}

/* ——————————————————————————
   9. Audio Recording File Styles
   —————————————————————————— */
.saved-file-item-container .audio-container {
	position: relative !important;
	top: auto !important;
	margin: 8px !important;
}

.saved-file-item-container .audio-container audio {
	width: 100%;
	border-radius: 8px;
}

/* ——————————————————————————
   10. Fallback File Upload (Manual/Legacy)
   —————————————————————————— */
.file-row {
	background: #fff;
	border: 1px solid #e8ecf1 !important;
	border-radius: 10px;
	padding: 12px 14px !important;
	margin-bottom: 8px !important;
}

.file-row .remove-file {
	border-radius: 8px !important;
	padding: 4px 8px !important;
}

/* ——————————————————————————
   11. File List Table View Actions
   —————————————————————————— */
.file-list-view {
	border-radius: 8px !important;
	border: 1px solid #e8ecf1 !important;
	transition: all 200ms ease;
	padding: 4px 6px !important;
}

/* ——————————————————————————
   12. File Name in DataTable
   —————————————————————————— */
.file-name-section a {
	font-weight: 500;
	color: #2d3748;
	transition: color 200ms ease;
}

.file-name-section a:hover {
	color: #6690F4;
}

/* ——————————————————————————
   13. Comment / Timeline File Section
   —————————————————————————— */

/* Make timeline-images flex wrap for compact cards */
.timeline-images {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-start;
}

.timeline-images a {
	text-decoration: none !important;
}

/* Image thumbnails in timeline */
.timeline-images img {
	border-radius: 10px;
	max-height: 120px;
	object-fit: cover;
	transition: all 250ms ease;
}

.timeline-images a:hover img {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* More files indicator */
.timeline-images .more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	min-height: 52px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.06);
	color: #5a6c7d;
	font-weight: 600;
	font-size: 13px;
}

/* ——————————————————————————
   14. Comment Image Box & Download Actions
   —————————————————————————— */
.comment-image-box {
	margin-bottom: 4px;
}

.comment-image-box .mb15 {
	margin-bottom: 8px !important;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.comment-image-box .mb15 a.float-end {
	float: none !important;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 8px;
	background: #f0f4f8;
	color: #5a6c7d;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	transition: all 200ms ease;
}

.comment-image-box .mb15 a.float-end:hover {
	background: #e2e8f0;
	color: #2d3748;
}

/* ===========================================
   Upload Loading Overlay
   =========================================== */
.dz-upload-overlay {
	background: linear-gradient(135deg, rgba(102, 144, 244, 0.06) 0%, rgba(42, 194, 212, 0.04) 100%);
	border: 1px solid rgba(102, 144, 244, 0.18);
	border-radius: 12px;
	padding: 14px 18px;
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 14px;
	animation: dzOverlayFadeIn 300ms ease forwards;
	position: relative;
	overflow: hidden;
}

.dz-upload-overlay.hide {
	display: none !important;
}

@keyframes dzOverlayFadeIn {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dz-upload-overlay-content {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	z-index: 1;
}

/* Spinner */
.dz-upload-spinner {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.dz-upload-spinner svg {
	width: 28px;
	height: 28px;
	animation: dzSpinnerRotate 1.2s linear infinite;
}

.dz-upload-spinner svg circle {
	stroke: #6690F4;
	stroke-dasharray: 90, 150;
	stroke-dashoffset: 0;
	stroke-linecap: round;
	animation: dzSpinnerDash 1.5s ease-in-out infinite;
}

@keyframes dzSpinnerRotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dzSpinnerDash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

.dz-upload-status-text {
	font-size: 13px;
	font-weight: 600;
	color: #4e5e6a;
	white-space: nowrap;
}

.dz-upload-percent {
	font-size: 13px;
	font-weight: 700;
	color: #6690F4;
	min-width: 36px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Progress track at the bottom */
.dz-upload-progress-track {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(102, 144, 244, 0.12);
	border-radius: 0 0 12px 12px;
	overflow: hidden;
}

.dz-upload-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #6690F4, #2ac2d4);
	border-radius: 0 3px 3px 0;
	transition: width 300ms ease;
	position: relative;
}

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

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

/* Upload complete state */
.dz-upload-overlay.upload-complete {
	border-color: rgba(16, 185, 129, 0.25);
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(52, 211, 153, 0.04) 100%);
}

.dz-upload-overlay.upload-complete .dz-upload-spinner svg circle {
	stroke: #10b981;
	animation: none;
	stroke-dasharray: 126;
	stroke-dashoffset: 0;
}

.dz-upload-overlay.upload-complete .dz-upload-spinner svg {
	animation: none;
}

.dz-upload-overlay.upload-complete .dz-upload-status-text {
	color: #059669;
}

.dz-upload-overlay.upload-complete .dz-upload-percent {
	color: #10b981;
}

.dz-upload-overlay.upload-complete .dz-upload-progress-fill {
	background: linear-gradient(90deg, #10b981, #34d399);
}

.dz-upload-overlay.upload-complete .dz-upload-progress-fill::after {
	animation: none;
}

/* ===========================================
   Submit Button — Inline Upload Progress
   =========================================== */
.btn-uploading,
.btn-upload-done {
	--upload-progress: 0%;
	position: relative;
	overflow: hidden;
	cursor: not-allowed !important;
	pointer-events: none;
	min-width: 140px;
	transition: background-color 300ms ease, box-shadow 300ms ease;
	z-index: 0;
}

/* Progress fill — sweeps left to right inside the button */
.btn-uploading::before,
.btn-upload-done::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--upload-progress, 0%);
	background: rgba(255, 255, 255, 0.18);
	transition: width 300ms ease;
	z-index: 1;
	border-radius: inherit;
}

/* Shimmer effect on the progress edge */
.btn-uploading::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--upload-progress, 0%);
	width: 30px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
	transform: translateX(-100%);
	z-index: 2;
	border-radius: inherit;
	animation: btnShimmerPulse 1.5s ease-in-out infinite;
}

@keyframes btnShimmerPulse {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 1; }
}

/* Button inner content stays above the fill */
.btn-uploading > *,
.btn-upload-done > * {
	position: relative;
	z-index: 3;
}

/* Spinner */
.btn-upload-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: btnSpinnerRotate 0.7s linear infinite;
	vertical-align: middle;
	margin-right: 4px;
	flex-shrink: 0;
}

.btn-upload-spinner.done {
	border-color: rgba(255, 255, 255, 0.6);
	border-top-color: #fff;
	animation: none;
}

@keyframes btnSpinnerRotate {
	to {
		transform: rotate(360deg);
	}
}

/* Label text */
.btn-upload-label {
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.2px;
}

/* === Upload Complete State === */
.btn-upload-done {
	background-color: #10b981 !important;
	border-color: #10b981 !important;
	box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

.btn-upload-done::before {
	background: rgba(255, 255, 255, 0.12);
	width: 100%;
}

.btn-upload-done::after {
	display: none;
}

/* ===========================================
   #954 — Enhanced Modal Save Button Visibility
   =========================================== */
.modal-footer .btn-primary {
	font-size: 14px;
	font-weight: 600;
	padding: 8px 24px;
	border-radius: 8px;
	letter-spacing: 0.3px;
	box-shadow: 0 4px 14px rgba(0, 179, 147, 0.30);
	transition: all 250ms ease;
}

.modal-footer .btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(0, 179, 147, 0.40);
}

.modal-footer .btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(0, 179, 147, 0.25);
}