/* Modal styling */
.modal-content { 
	/* A more subtle, layered box-shadow for a "softer" feel */ 
	--cool-shadow: 0 4.5px 5.3px rgba(0, 0, 0, 0.028), 
	0 15.1px 17.9px rgba(0, 0, 0, 0.042), 
	0 68px 80px rgba(0, 0, 0, 0.07); 

	/* A slightly more vibrant, multi-step gradient */ 
	background: linear-gradient(175deg, var(--bg-secondary), var(--bg-tertiary) 85%); 
	border: 1px solid var(--border-color); 
	border-radius: 16px; 
	box-shadow: var(--cool-shadow); 
	backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(140%); 
	-webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(140%); 
	overflow: hidden; 
	position: relative; 
	color: var(--text-primary); 
} 
.modal-header,
.modal-footer {
	/* Ensure header/footer don’t flex-grow when we make modal-content a flex column */
	flex: 0 0 auto;
}
.modal-header {
	background: linear-gradient(135deg, var(--header-grad-1), var(--header-grad-2));
	border-bottom: 1px solid rgba(var(--accent-primary-bright-rgb), .25);
}

[data-theme="dark"] .modal-header,
body.dark-mode .modal-header {
	border-bottom-color: rgba(var(--accent-primary-brighter-rgb), .35);
}

.modal-title {
	font-weight: 600;
}

.modal-footer {
	border-top: 1px solid var(--border-color);
}

/* Keep modal footer visible while body scrolls */
.modal-dialog.modal-dialog-scrollable .modal-footer {
	position: sticky;
	bottom: 0;
	background-color: var(--bg-secondary);
	z-index: 1; /* above body content */
}
/* Reserve space so sticky footer doesn’t cover the last part of content */
.modal-dialog.modal-dialog-scrollable .modal-footer {
	min-height: var(--modal-footer-height, 56px);
}

.modal-content input,
.modal-content select,
.modal-content textarea {
	box-shadow: none !important;
}

.modal-backdrop {
	z-index: 1040;
	pointer-events: auto;
}

.modal-backdrop.show {
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.modal {
	z-index: 1050;
}

.modal.show .modal-dialog {
	z-index: 1055;
}

/* Diary specific (ensure detail modal above create when both accidentally open) */
#diaryDetailModal.modal { z-index: 1056; }
#diaryDetailModal.modal .modal-dialog { z-index: 1057; }

[data-theme="dark"] .modal-content,
body.dark-mode .modal-content {
	box-shadow: 0 18px 46px rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .4);
}

/* Allow the modal body to scroll while keeping Bootstrap’s default centering */
/* Match Bootstrap's scrollable modal sizing to handle all modes (view/edit) */
.modal-dialog.modal-dialog-scrollable {
	height: calc(100% - (var(--bs-modal-margin, 1.75rem) * 2));
}
.modal-dialog.modal-dialog-scrollable .modal-content {
	max-height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.modal-dialog.modal-dialog-scrollable .modal-body {
	/* This is the scroll container */
	flex: 1 1 auto; /* safe with Bootstrap defaults */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	min-height: 0; /* critical for flex children to allow scrolling in edit modes */
}

/* Optional: subtle divider effect when content scrolls under footer */
/* keep a clean border at the top of footer */
.modal-dialog.modal-dialog-scrollable .modal-footer { border-top: 1px solid var(--border-color); }
/* Ensure header/footer don't steal space when body should scroll */
.modal-dialog.modal-dialog-scrollable .modal-header,
.modal-dialog.modal-dialog-scrollable .modal-footer { flex-shrink: 0; }

/* Forms wrapping body/footer (create modals): make the form a flex column so body can scroll */
.modal-dialog.modal-dialog-scrollable .modal-content > form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
}
.modal-dialog.modal-dialog-scrollable .modal-content > form .modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	min-height: 0;
}
.modal-dialog.modal-dialog-scrollable .modal-content > form .modal-footer { flex-shrink: 0; }

.modal .input-group-text {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color);
}

.modal [data-symbol-prefix] {
	min-width: 42px;
	justify-content: center;
}

.modal .form-text {
	font-size: .725rem;
}

/* Category chips and compact close button */
.category-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
}
.category-chips .badge {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .2rem .45rem;
	border-radius: .5rem;
	font-weight: 500;
}
.category-chips .badge .btn-close {
	width: .68rem;
	height: .68rem;
	padding: 0;
	margin-left: .3rem !important;
	opacity: .85;
	border-radius: 999px;
	background-color: transparent;
	background-size: 9px 9px;
	transition: background-color .15s ease, opacity .15s ease, transform .12s ease;
}
.category-chips .badge .chip-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: .9rem;
	height: .9rem;
	padding: 0;
	margin-left: .3rem !important;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	line-height: 1;
}
.category-chips .badge .chip-close i {
	font-size: .65rem;
}
.category-chips .badge .chip-close:hover {
	opacity: 1;
	background-color: rgba(var(--text-primary-rgb, 31,41,55), .08);
	box-shadow: inset 0 0 0 1px rgba(var(--accent-primary-rgb), .25);
}
[data-theme="dark"] .category-chips .badge .chip-close:hover,
body.dark-mode .category-chips .badge .chip-close:hover {
	background-color: rgba(255,255,255,.08);
}
.category-chips .badge .chip-close:active { transform: scale(0.9); }
.category-chips .badge .chip-close:focus { outline: none; box-shadow: none; }
.category-chips .badge .chip-close:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1px rgba(var(--accent-primary-rgb), .35), var(--focus-ring);
}
.category-chips .badge .btn-close:hover {
	opacity: 1;
	background-color: rgba(var(--text-primary-rgb, 31,41,55), .08);
	box-shadow: inset 0 0 0 1px rgba(var(--accent-primary-rgb), .25);
}
[data-theme="dark"] .category-chips .badge .btn-close:hover,
body.dark-mode .category-chips .badge .btn-close:hover {
	background-color: rgba(255,255,255,.08);
}
.category-chips .badge .btn-close:active {
	transform: scale(0.9);
}
.category-chips .badge .btn-close:focus { outline: none; box-shadow: none; }
.category-chips .badge .btn-close:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1px rgba(var(--accent-primary-rgb), .35), var(--focus-ring);
}

/* Slight hover feedback for whole chip */
.category-chips .badge:hover {
	filter: saturate(1.03);
}

/* Smaller input-group for category adders */
.modal .input-group.input-group-sm > .form-control {
	min-height: 32px;
}
.modal .input-group.input-group-sm > .btn {
	min-height: 32px;
}

/* Comment and text formatting styles */
[data-markdown-container] {
	white-space: pre-wrap; /* Preserve whitespace and wrap lines */
	word-break: break-word;
	line-height: 1.4;
}

/* Markdown formatted text styles */
[data-markdown-container] code {
	background-color: var(--bg-secondary);
	padding: 0.125rem 0.25rem;
	border-radius: 0.25rem;
	font-size: 0.875em;
	font-family: 'Courier New', Courier, monospace;
}

[data-markdown-container] h3,
[data-markdown-container] h4,
[data-markdown-container] h5 {
	margin: 1rem 0 0.5rem 0;
}

[data-markdown-container] h3:first-child,
[data-markdown-container] h4:first-child,
[data-markdown-container] h5:first-child {
	margin-top: 0;
}

[data-markdown-container] a {
	color: var(--bs-primary);
	text-decoration: none;
}

[data-markdown-container] a:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion:no-preference) {
	.modal.fade .modal-dialog {
		transition: transform .3s ease, opacity .3s ease;
	}
}