/**
 * MSys Download Manager — frontend styles.
 *
 * Theme-neutral, low-specificity, easily overridden by Elementor style
 * controls. Custom properties expose the main knobs.
 */

.msysdl-dl {
	--msysdl-btn-bg: #2271b1;
	--msysdl-btn-bg-hover: #135e96;
	--msysdl-btn-fg: #ffffff;
	--msysdl-btn-radius: 4px;
	--msysdl-meta-fg: #555555;

	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4em;
	max-width: 100%;
}

.msysdl-dl--hidden {
	display: none;
}

.msysdl-dl__btn {
	display: inline-block;
	padding: 0.6em 1.2em;
	background: var(--msysdl-btn-bg);
	color: var(--msysdl-btn-fg);
	border: none;
	border-radius: var(--msysdl-btn-radius);
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

a.msysdl-dl__btn:hover,
a.msysdl-dl__btn:focus {
	background: var(--msysdl-btn-bg-hover);
	color: var(--msysdl-btn-fg);
	text-decoration: none;
}

.msysdl-dl__btn:focus-visible {
	outline: 2px solid var(--msysdl-btn-bg-hover);
	outline-offset: 2px;
}

.msysdl-dl__btn--disabled {
	background: #dcdcde;
	color: #646970;
	cursor: not-allowed;
	pointer-events: none;
}

.msysdl-dl__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	font-size: 0.85em;
	color: var(--msysdl-meta-fg);
}

.msysdl-dl__meta:empty {
	display: none;
}

.msysdl-dl__line {
	display: block;
	word-break: break-word;
}

.msysdl-dl__label {
	font-weight: 600;
}

.msysdl-dl__sha .msysdl-dl__value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	word-break: break-all;
}

/* ----------------------------------------------------------------------- *
 * History button + modal
 * ----------------------------------------------------------------------- */

.msysdl-history {
	display: inline-block;
}

/* The colour is driven by a custom property (default = our blue). The rules are
   scoped under .msysdl-history so they out-specify a theme's `<button>` colour
   (e.g. `.x button:focus` = 0,2,1) which otherwise turns the trigger pink. The
   Elementor "Normal" control sets --msysdl-open-color (not `color`), so a
   user-chosen colour cascades into every state — including the focus the button
   receives when the modal closes (issue #11). */
.msysdl-history .msysdl-history__open {
	--msysdl-open-color: #2271b1;
	display: inline-block;
	padding: 0.6em 1.2em;
	background: transparent;
	color: var( --msysdl-open-color );
	border: 1px solid currentColor;
	border-radius: 4px;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	/* Reset the theme's native button look and pin full opacity. */
	-webkit-appearance: none;
	appearance: none;
	opacity: 1;
}

/* Hover tint on real pointer hover / active press only. */
.msysdl-history .msysdl-history__open:hover,
.msysdl-history .msysdl-history__open:active {
	background: rgba(34, 113, 177, 0.08);
	color: var( --msysdl-open-color );
	opacity: 1;
}

/* Focus (returns here when the modal closes): keep the on-colour + opacity so
   no theme can grey it out OR paint it pink, but no hover background (so it does
   not look "stuck on hover"). Keyboard focus is shown via :focus-visible. */
.msysdl-history .msysdl-history__open:focus {
	color: var( --msysdl-open-color );
	opacity: 1;
}

.msysdl-history .msysdl-history__open:focus-visible {
	outline: 2px solid #135e96;
	outline-offset: 2px;
}

body.msysdl-modal-open {
	overflow: hidden;
}

.msysdl-history__modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.msysdl-history__modal[hidden] {
	display: none;
}

.msysdl-history__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.msysdl-history__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 640px;
	max-height: 85vh;
	overflow-y: auto;
	background: #ffffff;
	color: #1d2327;
	border-radius: 8px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
	padding: 1.5rem 1.75rem 1.75rem;
}

.msysdl-history__dialog:focus {
	outline: none;
}

.msysdl-history .msysdl-history__close {
	--msysdl-close-color: #50575e;
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	width: 2rem;
	height: 2rem;
	/* Flex-centre the "×" glyph (line-height alone does not centre it reliably). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	/* Explicit default colour driven by a custom property — NOT `inherit`.
	   `inherit` let a theme's <button> colour bleed in and paint the × pink
	   (issue #12); the property lets the Elementor "Close button → Normal"
	   control cascade into every state (incl. the focus the × gets on open).
	   Scoped under .msysdl-history to out-specify theme `button` rules. */
	color: var( --msysdl-close-color );
	background: rgba( 127, 127, 127, 0.18 );
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	opacity: 0.85;
	cursor: pointer;
	border-radius: 4px;
}

.msysdl-history .msysdl-history__close:hover,
.msysdl-history .msysdl-history__close:focus {
	/* Keep the (cascading) colour so a theme's button:focus cannot repaint the
	   × pink; only bump opacity — no background change (that stays the base /
	   the user-chosen chip colour). */
	color: var( --msysdl-close-color );
	opacity: 1;
}

.msysdl-history__title {
	margin: 0 2rem 1rem 0;
	font-size: 1.4rem;
	line-height: 1.2;
}

.msysdl-history__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.msysdl-history__item {
	padding: 0.9rem 0;
	border-top: 1px solid #e0e0e0;
}

.msysdl-history__item:first-child {
	border-top: none;
	padding-top: 0;
}

.msysdl-history__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.35rem;
}

.msysdl-history__ver {
	font-weight: 700;
	font-size: 1.05rem;
}

.msysdl-history__date {
	font-size: 0.85rem;
	color: #646970;
}

.msysdl-history__log {
	font-size: 0.92rem;
	line-height: 1.55;
	white-space: normal;
	overflow-wrap: break-word;
}

.msysdl-history__empty {
	margin: 0;
	color: #646970;
}

/* ----------------------------------------------------------------------- *
 * Info label / icon (msysdl_info — issues #9 + #10)
 * ----------------------------------------------------------------------- */

.msysdl-info {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	max-width: 100%;
}

.msysdl-info--icon,
.msysdl-info--description {
	display: inline-block;
}

.msysdl-info__label {
	font-weight: 600;
}

.msysdl-info__value {
	overflow-wrap: break-word;
}

.msysdl-info--sha256 .msysdl-info__value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	word-break: break-all;
}

.msysdl-info__icon-img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}