/**
 * Front end styles of the download manager.
 *
 * The layout is done with the Bootstrap 5 grid and utility classes that Joomla templates
 * already ship, so this file only carries what Bootstrap has no opinion about: the
 * alternating row colours, the fixed image boxes, and the download button on a detail
 * page. If a template does not load Bootstrap, the few fallbacks at the bottom keep the
 * lists readable rather than collapsing them into one column of text.
 *
 * The historic class names that name a thing rather than a place (dspec, dspecframe,
 * downhead, cheerio, ...) are still emitted so existing overrides keep matching. See the
 * compatibility section at the bottom for why the positional ones had to go.
 *
 * @copyright  (C) 2026 Laserworld
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

.dlm {
	--dlm-row-bg: #eeeeee;
	--dlm-row-bg-alt: #dddddd;
	--dlm-row-bg-hover: #dfe3e8;
	--dlm-border: #cfd4da;
	--dlm-border-strong: #52585d;
	--dlm-accent: #ffa000;
	--dlm-button-bg: #283242;
	--dlm-button-bg-hover: #43536e;
	--dlm-button-fg: #ffffff;

	display: block;
}

.dlm__heading {
	margin: 0 0 1rem;
}

.dlm__empty {
	padding: 1rem;
	border: 1px dashed var(--dlm-border);
	border-radius: 0.375rem;
}

/* ------------------------------------------------------------------ rows ---- */

.dlm-row,
.dlm-listtile {
	background: var(--dlm-row-bg-alt);
	transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dlm-row:nth-of-type(even),
.dlm-listtile:nth-of-type(even) {
	background: var(--dlm-row-bg);
}

.dlm-row:hover,
.dlm-row:focus-visible,
.dlm-listtile:hover,
.dlm-listtile:focus-visible {
	background: var(--dlm-row-bg-hover);
	box-shadow: inset 0 0 0 2px var(--dlm-accent);
}

/*
 * Bootstrap has no fixed-pixel column. The thumbnail box is 100px wide whether or not
 * the download has a thumbnail, so the titles line up down the list; the gutter is added
 * on top because .col-auto carries it as padding.
 */
.dlm-row__image,
.dlm-listtile__image {
	min-width: calc(100px + var(--bs-gutter-x, 1.5rem));
}

.dlm-row__image img,
.dlm-listtile__image img {
	max-width: 100px;
	height: auto;
	mix-blend-mode: multiply;
}

/* Keeps the right hand column the same width down the list instead of ragged. */
.dlm-row__meta {
	min-width: 14rem;
}

.dlm-row__description,
.dlm-row__firmware {
	opacity: 0.85;
}

/*
 * The slim row, for a list where every entry is the same kind of thing - a page of free
 * laser shows, where a thumbnail, a year and a file icon would be the same on all of them
 * and say nothing. Two lines, and the description held to one of them so the list stays a
 * list that can be scanned rather than read.
 */
.dlm-row--slim .dlm-row__description {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dlm-row__icon {
	width: 48px;
	height: auto;
	flex: 0 0 48px;
}

.dlm-list,
.dspecframe,
.dlm-group__items {
	display: block;
	margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------------- tiles ---- */

.dlm-group__items.dlm-layout--tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.dlm-group__items.dlm-layout--cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 0.75rem;
}

.dlm-tile {
	width: 160px;
	border: 1px solid var(--dlm-border-strong);
}

.dlm-tile:hover,
.dlm-tile:focus-visible {
	border-color: var(--dlm-accent);
}

.dlm-card {
	border: 1px solid var(--dlm-border);
	background: var(--dlm-row-bg);
}

.dlm-card:hover,
.dlm-card:focus-visible {
	border-color: var(--dlm-accent);
}

.dlm-card__thumbs {
	max-height: 190px;
	overflow: hidden;
}

.dlm .dlm-card__thumbs .imgframe {
	width: 80px;
	height: 80px;
}

.dlm-card__thumbs img {
	height: 80px;
	width: auto;
	max-width: none;
}

/* ------------------------------------------------------------------ item ---- */

/*
 * The heading panel, the fact list and the download bar copy the measurements of the
 * legacy pages, so a visitor arriving on an old bookmark sees the same page: a grey
 * panel with a 10px radius, the type set in the heading size but greyed back, the
 * title a little smaller and heavier below it, and the facts indented to line up with
 * the text inside the panel. Everything Bootstrap already handles - the grid, the
 * spacing, the flex row inside the button - is left to the utilities in the markup.
 */
.dlm-item__heading {
	border-color: #333 !important;
	border-radius: 10px !important;
	background: var(--dlm-row-bg-alt);
	line-height: 1.5;
}

.dlm-item__type {
	color: #777;
}

.dlm-item__title {
	font-size: 0.75em;
	font-weight: 900;
}

.dlm-item__facts dd {
	margin-bottom: 0;
}

/*
 * The descriptions arrive as markup (see HtmlSanitizer) and are the one place on the page
 * where the component prints someone else's tags, so they are boxed in: an image cannot
 * push the column wider than it is, and a list keeps the indent the rest of the text has.
 */
.dlm-item__summary img,
.dlm-item__description img {
	max-width: 100%;
	height: auto;
}

.dlm-item__summary ul,
.dlm-item__summary ol,
.dlm-item__description ul,
.dlm-item__description ol {
	padding-left: 1.5rem;
}

.dlm-item__note {
	border: 1px solid var(--dlm-accent);
	border-radius: 0.375rem;
	background: var(--dlm-row-bg-alt);
}

/*
 * The download bar is the point of the page, so it is the strongest thing on it: white on
 * the dark navy of the old pages, which is a contrast ratio of about 13:1, well past the
 * 4.5:1 the guidelines ask for. The focus ring is drawn in the accent colour because the
 * default browser outline is nearly invisible against this background.
 */
.dlm-item__button {
	border: 1px solid #777;
	border-radius: 10px !important;
	background: var(--dlm-button-bg);
	color: var(--dlm-button-fg);
	font-size: 1.15rem;
	line-height: 1.4;
}

.dlm-item__button:hover,
.dlm-item__button:focus-visible {
	background: var(--dlm-button-bg-hover);
	color: var(--dlm-button-fg);
}

.dlm-item__button:focus-visible {
	outline: 3px solid var(--dlm-accent);
	outline-offset: 2px;
}

.dlm-item__button:hover .dlm-item__button-label {
	text-decoration: underline;
}

.dlm-item__button-meta {
	font-size: 0.82em;
	white-space: nowrap;
}

/*
 * Some downloads carry a picture that matters as much as the text - a console, a mounting
 * detail, a front panel - so the column keeps it as large as the old pages did rather than
 * shrinking it to a thumbnail, and it stays beside the text down to the lg breakpoint.
 */
.dlm-item__media {
	max-width: 500px;
}

.dlm-item__media img {
	max-width: 100%;
	height: auto;
}

.dlm-dmx__console img,
.dlm-category__image {
	max-width: 150px;
	height: auto;
}

/* -------------------------------------------------------------- fallback ---- */

/*
 * Sizing hints on our own class names. Where the template ships Bootstrap these simply
 * agree with what .row / .col already do; where it does not, they are enough to keep a
 * row on one line instead of stacking the image, the text and the meta column.
 * Alignment is deliberately left to the Bootstrap utilities in the markup.
 */
.dlm .dlm-row__inner,
.dlm .dlm-listtile__inner {
	display: flex;
	flex-wrap: wrap;
}

.dlm-row__content,
.dlm-listtile__content {
	flex: 1 1 0%;
	min-width: 14rem;
}

@media (min-width: 768px) {
	.dlm-row__meta {
		flex: 0 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dlm-row,
	.dlm-listtile {
		transition: none;
	}
}

/* ------------------------------------------------------- compatibility ---- */

/*
 * Living beside the old stylesheet.
 *
 * The historic class names are still emitted so that overrides written against the old
 * markup keep matching. On the Laserworld and Showcontroller sites those names are
 * defined in the template's own stylesheet, not in the old component, so they stay live
 * after the switch - and what they carry is float and fixed pixel geometry:
 *
 *   .resdorow  { float: left; display: block; width: 100% }
 *   .resdocont { float: left; width: calc(100% - 365px); min-width: 250px }
 *   .resdotype { float: left; width: 140px }
 *   .downframe { float: left; margin: 25px 0 0 25px }
 *
 * Two rules follow from that. The first is in the markup: a historic name never shares an
 * element with a .row or a .col, because both would be setting width and display and the
 * loser is decided by which stylesheet the template happens to load last - which is how a
 * grid silently turns back into a stack of floated blocks. The purely positional names
 * (mainrow, aa, bb, cc, dd, resdorow, resdocont, resdoyear, resdoimg) are therefore gone;
 * the ones that name a thing rather than a place are kept.
 *
 * The second is here: on the elements that keep a historic name and are laid out by
 * something other than the grid, the geometry is reset so it cannot fight the utilities
 * in the markup. Colour, background and type are deliberately left alone, since that is
 * what an override is normally for.
 */
.dlm .dspec,
.dlm .dspecother,
.dlm .dspecdmx,
.dlm .dspecframe,
.dlm .resdotype,
.dlm .resdoimgdmx,
.dlm .resdocontdmx,
.dlm .imgframe,
.dlm .downhead,
.dlm .dlm-card__header,
.dlm .dlm-card__thumbs,
.dlm .dlm-item__body,
.dlm .dlm-item__summary,
.dlm .dlm-item__note,
.dlm .dlm-item__button,
.dlm .dlm-item__button-label,
.dlm .dlm-item__button-meta,
.dlm .dlm-item__description {
	float: none;
	width: auto;
	max-width: none;
	height: auto;
	margin-left: 0;
	margin-right: 0;
}