/* Modern Card Style for MTLI Attachments */
.mtli_attachment,
.mlti_attachment {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 58px;
	margin: 6px 4px 6px 0;
	vertical-align: middle;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-size: 38px 38px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
	color: #1e293b !important;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none !important;
	word-break: break-word;
	overflow-wrap: break-word;
	cursor: pointer;
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mtli_attachment:visited,
.mlti_attachment:visited {
	color: #1e293b !important;
	text-decoration: none !important;
}

.mtli_attachment:hover,
.mlti_attachment:hover,
.mtli_attachment:focus,
.mlti_attachment:focus {
	background-color: #f8fafc;
	border-color: #cbd5e1;
	box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.11), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
	transform: translateY(-2px);
	color: #0f172a !important;
	text-decoration: none !important;
}

.mtli_attachment:active,
.mlti_attachment:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px 0 rgba(15, 23, 42, 0.06);
}

.mtli_attachment:focus-visible,
.mlti_attachment:focus-visible {
	outline: 2px solid #64748b;
	outline-offset: 2px;
}

.mtli_attachment,
.mlti_attachment {
	background-position: 16px center;
	padding: 12px 20px 12px 68px !important;
	border-left-width: 3.5px !important;
}
/* Accent color by mime type */
.mtli_pdf, .mlti_pdf { border-left-color: #e11d48 !important; }
.mtli_doc, .mlti_doc, .mtli_docx, .mlti_docx, .mtli_odt, .mlti_odt { border-left-color: #2563eb !important; }
.mtli_xls, .mlti_xls, .mtli_xlsx, .mlti_xlsx, .mtli_ods, .mlti_ods { border-left-color: #16a34a !important; }
.mtli_ppt, .mlti_ppt, .mtli_pptx, .mlti_pptx, .mtli_odp, .mlti_odp { border-left-color: #ea580c !important; }
.mtli_zip, .mlti_zip { border-left-color: #d97706 !important; }
.mtli_txt, .mlti_txt { border-left-color: #64748b !important; }

/* File size badge */
.mtli_attachment[data-mtli]:after,
.mlti_attachment[data-mtli]:after {
	display: inline-flex;
	align-items: center;
	margin-left: 24px;
	padding: 3px 9px;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #475569;
	background-color: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	vertical-align: middle;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mtli_attachment[data-mtli]:hover:after,
.mlti_attachment[data-mtli]:hover:after {
	background-color: #e2e8f0;
	color: #0f172a;
	border-color: #cbd5e1;
}

/* Subtle download icon when no file size badge is present */
.mtli_attachment:not([data-mtli])::after,
.mlti_attachment:not([data-mtli])::after {
	content: "";
	display: inline-block;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin-left: 24px;
	flex-shrink: 0;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
	opacity: 0.7;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.mtli_attachment:not([data-mtli]):hover::after,
.mlti_attachment:not([data-mtli]):hover::after {
	opacity: 1;
	transform: translateY(1px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}