/*
 * Project:     DMsHelper
 * File:        areanotes.css
 * Description: Styles for the read-only popup modal shared by VCAreaDescription
 *              and VCDMNotes view components. Loaded globally via _Layout.cshtml.
 * File Location: \wwwroot\css\areanotes.css
 * Created:     TBM 2026
 * History:     2026 Initial Release
 *              2026 Added .vcd-read-modal__fullscreen-btn for the expand/compress
 *                   toggle button in the read-only modal header.
 *              2026 Added #ReadOnly_AreaDescription and #ReadOnly_AreaDMNotes
 *                   scroll cap — limits inline panels to 200px with a scrollbar.
 *              2026 Added .vcd-subheader-btn modifier — fixes icon rendering on
 *                   btn-subheader elements that contain only an <i> FA icon.
 */

/* ── Read-only modal shell ── */
.vcd-read-modal {
	border: 2px solid var(--dh-red);
	border-radius: 8px;
	overflow: hidden;
}

/* ── Header ── */
.vcd-read-modal__header {
	background-color: var(--dh-red);
	color: white;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: none;
}

.vcd-read-modal__title {
	font-family: 'Times New Roman', serif;
	font-size: 1.3rem;
	font-weight: bold;
	margin: 0 0 0.15rem;
	color: white;
}

.vcd-read-modal__subtitle {
	font-size: 0.8rem;
	opacity: 0.85;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ── Scrollable body ── */
.vcd-read-modal__body {
	background-color: white;
	padding: 1.5rem 2rem;
	font-family: 'Times New Roman', Georgia, serif;
	font-size: 1.05rem;
	line-height: 1.8;
	color: #2b1d0e;
	max-height: 65vh; /* modal-dialog-scrollable handles the scroll */
	overflow-y: auto;
}

/* In fullscreen the dialog owns the full viewport — let the body fill it */
.modal-fullscreen .vcd-read-modal__body {
	max-height: none;
	flex: 1 1 auto; /* stretches between fixed header and footer */
}

/* Preserve rich-text heading colors from Trumbowyg output */
.vcd-read-modal__body h1,
.vcd-read-modal__body h2,
.vcd-read-modal__body h3,
.vcd-read-modal__body h4,
.vcd-read-modal__body h5,
.vcd-read-modal__body h6 {
	color: var(--dh-red);
}

/* ── Footer ── */
.vcd-read-modal__footer {
	background-color: #f8f8f8;
	border-top: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 1.25rem;
}

.vcd-read-modal__badge {
	font-size: 0.78rem;
	color: #888;
	font-style: italic;
}

/* ── Fullscreen toggle button (in modal header) ── */
.vcd-read-modal__fullscreen-btn {
	color: white;
	opacity: 0.8;
	padding: 0.1rem 0.4rem;
	font-size: 0.95rem;
	line-height: 1;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	background: transparent;
	transition: opacity 0.15s, background 0.15s;
}

	.vcd-read-modal__fullscreen-btn:hover {
		opacity: 1;
		background: rgba(255, 255, 255, 0.2);
		color: white;
	}

/* ── Inline description/notes panels — capped height with scrollbar ── */
#ReadOnly_AreaDescription,
#ReadOnly_AreaDMNotes {
	display: block;
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}

/* ── Icon-only subheader button modifier ── */
/* btn-subheader has no width and display:block — FA pseudo-elements need   */
/* explicit dimensions and inline-flex to centre the <i> icon reliably.     */
.btn-subheader.vcd-subheader-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	padding: 0;
}