/*
 * BND Documents - public library.
 *
 * Layout follows the agreed mockup: folders left, search and format filter above a
 * grid of narrow cards, each led by a format coloured icon block.
 *
 * Light mode only, by decision. The accent and text colours come from the Elementor
 * global kit so changing the palette in Site Settings changes the library too; the
 * fallbacks are the current palette, for when the library renders outside an
 * Elementor page.
 */

.bnd-library {
	--bnd-primary: var(--e-global-color-primary, #113e66);
	--bnd-accent: var(--e-global-color-secondary, #dc2928);
	--bnd-text: var(--e-global-color-text, #7a7a7a);

	--bnd-surface: #f7f8f9;
	--bnd-card: #fff;
	--bnd-line: rgba(17, 62, 102, 0.12);
	--bnd-tint: rgba(17, 62, 102, 0.07);
	--bnd-muted: rgba(17, 62, 102, 0.55);
	--bnd-radius: 12px;

	/* Set here rather than left to the theme, because the sidebar heading has to line
	   up with the main one and that needs a known line box. */
	--bnd-title-size: 22px;
	--bnd-title-line: 1.3;

	display: grid;
	grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding: 16px;
	border-radius: var(--bnd-radius);
	background: var(--bnd-surface);
	color: var(--bnd-text);
	/* The host section decides its own alignment, and an Elementor section is often
	   centred. Inherited, that centres folder names and list titles while the rest of
	   the row stays left. */
	text-align: left;
}

.bnd-single {
	text-align: left;
}

.bnd-library--no-tree {
	grid-template-columns: minmax(0, 1fr);
}

.bnd-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Doubled class on purpose: the Elementor kit styles elements at (0,1,1), which
   outranks a single class. min-width stops a flex row from squeezing the icon into a
   sliver when the folder name is long. */
.bnd-icon.bnd-icon {
	/* content-box, not the global border-box: with padding from anywhere the width
	   would be eaten from the inside and the glyph would shrink while the element
	   kept its size. This way the number is the drawing, always. */
	box-sizing: content-box;
	flex: 0 0 auto;
	/* The theme puts a 15px right margin on svg inside links; measured, not guessed.
	   Everything that could eat into or hang off the glyph is zeroed here. */
	margin: 0;
	padding: 0;
	border: 0;
	width: var(--bnd-icon-size, 20px);
	min-width: var(--bnd-icon-size, 20px);
	height: var(--bnd-icon-size, 20px);
	min-height: var(--bnd-icon-size, 20px);
}

/* Without the script there is nothing to open a collapsed branch and nothing to run
   the search, so both fall back to being fully visible. The class is set by the
   script itself, which is the only reliable signal that it is running. */
html:not(.bnd-js) .bnd-tree__children[hidden] {
	display: block;
}

.bnd-js .bnd-filters__submit {
	display: none;
}

/* ------------------------------------------------------------------ tree */

/* Same box height as the main title, so the two column headings sit on one line. */
.bnd-tree__label {
	display: flex;
	align-items: center;
	height: calc(var(--bnd-title-size) * var(--bnd-title-line));
	margin: 0 0 12px;
	color: var(--bnd-muted);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bnd-tree__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnd-tree__item {
	margin: 0;
}

/* The indent is a custom property, so one recursion renders a tree of any depth
   without a stylesheet rule per level. */
.bnd-tree__row {
	display: flex;
	align-items: center;
	padding-left: calc(var(--bnd-depth, 0) * 16px);
}

.bnd-tree__toggle {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bnd-muted);
	cursor: pointer;
}

.bnd-tree__toggle--empty {
	cursor: default;
}

.bnd-tree__toggle .bnd-icon {
	transition: transform 0.15s ease;
}

.bnd-tree__toggle[aria-expanded="false"] .bnd-icon {
	transform: rotate(-90deg);
}

.bnd-tree__children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnd-tree__link {
	display: flex;
	flex: 1 1 auto;
	gap: 8px;
	align-items: center;
	min-width: 0;
	padding: 7px 9px;
	border-radius: 8px;
	color: var(--bnd-primary);
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bnd-tree__link:hover,
.bnd-tree__link:focus-visible {
	background: var(--bnd-tint);
}

.bnd-tree__link.is-current {
	background: var(--bnd-tint);
	font-weight: 500;
}

.bnd-tree__name {
	flex: 1 1 auto;
	min-width: 0;
}

.bnd-tree__count {
	flex: 0 0 auto;
	color: var(--bnd-muted);
	font-size: 11px;
}

/* ------------------------------------------------------------------ head */

.bnd-library__title {
	margin: 0 0 12px;
	color: var(--bnd-primary);
	font-size: var(--bnd-title-size);
	line-height: var(--bnd-title-line);
}

.bnd-library__lead {
	margin: 0 0 12px;
	font-size: 14px;
}

.bnd-library__meta {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 14px;
}

.bnd-library__count {
	margin: 0;
	color: var(--bnd-muted);
	font-size: 12px;
}

/* ------------------------------------------------------------------ view toggle */

/* A quiet segmented control: one thin outline, the chosen option only tinted. It
   should read as a setting, not compete with the search above it. */
.bnd-layout {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--bnd-line);
	border-radius: 8px;
	background: var(--bnd-card);
}

.bnd-layout__option {
	--bnd-icon-size: 16px;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 26px;
	margin: 0;
	border-radius: 6px;
	color: var(--bnd-muted);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bnd-layout__option:hover {
	color: var(--bnd-primary);
}

.bnd-layout__input:checked + .bnd-layout__option {
	background: var(--bnd-tint);
	color: var(--bnd-primary);
}

.bnd-layout__input:focus-visible + .bnd-layout__option {
	outline: 2px solid var(--bnd-primary);
	outline-offset: 1px;
}

/* Switching is done by the script alone, so without it there is nothing to offer. */
html:not(.bnd-js) .bnd-layout {
	display: none;
}

.bnd-library__empty {
	padding: 32px;
	border: 1px dashed var(--bnd-line);
	border-radius: var(--bnd-radius);
	text-align: center;
}

/* ------------------------------------------------------------------ filters */

.bnd-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 12px;
}

.bnd-filters__input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid var(--bnd-line);
	border-radius: 8px;
	background: var(--bnd-card);
	font-size: 13px;
}

.bnd-filters__select {
	flex: 0 0 auto;
	width: 150px;
	padding: 8px 10px;
	border: 1px solid var(--bnd-line);
	border-radius: 8px;
	background: var(--bnd-card);
	font-size: 13px;
}

.bnd-filters__submit {
	flex: 0 0 auto;
	padding: 9px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--bnd-primary);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
}

.bnd-filters__clear {
	color: var(--bnd-muted);
	font-size: 12px;
}

/* ------------------------------------------------------------------ grid */

.bnd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnd-grid__item {
	margin: 0;
}

.bnd-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: 12px;
	border: 1px solid var(--bnd-line);
	border-radius: var(--bnd-radius);
	background: var(--bnd-card);
}

.bnd-card__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 72px;
	margin-bottom: 10px;
	border-radius: 8px;
	background: #f1f3f5;
	color: var(--bnd-text);
}

.bnd-card__preview {
	--bnd-icon-size: 40px;
}

/* One tint per file family, so the grid is readable before a single word is read. */
.bnd-card__preview--pdf {
	background: #fdecec;
	color: #dc2928;
}

.bnd-card__preview--word {
	background: #e9eff7;
	color: #1d4e89;
}

.bnd-card__preview--excel {
	background: #e8f5ec;
	color: #1e7a46;
}

.bnd-card__preview--ppt {
	background: #fdeee4;
	color: #c9531c;
}

.bnd-card__preview--slika {
	background: #f1ecfa;
	color: #7a4bb3;
}

.bnd-card__preview--prazno {
	color: #aeb4b9;
}

.bnd-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-width: 0;
}

.bnd-card__pill {
	max-width: 100%;
	margin-bottom: 6px;
	padding: 2px 8px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--bnd-tint);
	color: var(--bnd-primary);
	font-size: 11px;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bnd-card__title {
	margin: 0 0 2px;
	color: var(--bnd-primary);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}

.bnd-card__meta {
	margin: 0 0 10px;
	color: var(--bnd-muted);
	font-size: 11px;
}

/* Pushed to the bottom so the buttons line up across cards of different heights. */
.bnd-card__actions {
	display: flex;
	gap: 6px;
	width: 100%;
	margin-top: auto;
}

.bnd-card__button {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	padding: 7px 4px;
	/* Kills any gap a whitespace node or inherited word-spacing could contribute;
	   the label puts its own size back. */
	font-size: 0;
	border: 1px solid var(--bnd-line);
	border-radius: 8px;
	color: var(--bnd-primary);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bnd-card__button {
	--bnd-icon-size: 18px;
}

/* Glyph and label share one box, so the distance between them depends on this rule
   alone — not on the button's display mode, and not on whitespace in the markup. */
.bnd-card__inner {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
}

.bnd-card__label {
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
}

.bnd-card__button:hover,
.bnd-card__button:focus-visible {
	background: var(--bnd-tint);
}

.bnd-card__button--solid {
	border-color: var(--bnd-primary);
	background: var(--bnd-primary);
	color: #fff;
}

.bnd-card__button--solid:hover,
.bnd-card__button--solid:focus-visible {
	background: #0d3253;
}

/* Dimmed while the next listing is on its way, so a slow connection still shows
   that the click registered. */
.bnd-library.is-loading {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.bnd-library.is-loading a,
.bnd-library.is-loading button {
	pointer-events: none;
}

/* ------------------------------------------------------------------ pager */

.bnd-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-top: 20px;
}

.bnd-pager__link {
	padding: 7px 13px;
	border: 1px solid var(--bnd-line);
	border-radius: 8px;
	background: var(--bnd-card);
	color: var(--bnd-primary);
	font-size: 13px;
	text-decoration: none;
}

.bnd-pager__link.is-current {
	border-color: var(--bnd-primary);
	background: var(--bnd-primary);
	color: #fff;
}

.bnd-pager__gap {
	padding: 0 4px;
}

/* ------------------------------------------------------------------ list view */

/*
 * The same card markup, laid out as table rows. One renderer serves both views, so
 * the two can never disagree about what a document shows. The class lives on <html>
 * because in place navigation replaces the library but never the root element.
 *
 * Column widths follow the width of the main column, not of the screen: with the
 * folder tree beside it, a wide screen can still leave the table narrow.
 */
.bnd-library__main {
	container-type: inline-size;
	container-name: bnd-main;
}

/* Table only parts stay out of the card view. */
.bnd-card__cell,
.bnd-card__meta-date,
.bnd-grid__head {
	display: none;
}

/* The first track is the 36px glyph plus the row's 14px left padding: in a subgrid
   the padding is taken out of the edge track, and a track exactly as wide as the
   glyph would let the name run straight into it.

   Set on the grid, not on .bnd-library: a container query can only reach elements
   inside the container, and .bnd-library sits outside .bnd-library__main. */
.bnd-layout-list .bnd-library .bnd-grid {
	--bnd-list-cols: 50px minmax(0, 1fr) 56px 80px 92px auto;
}

.bnd-layout-list .bnd-library .bnd-grid {
	grid-template-columns: var(--bnd-list-cols);
	gap: 0 14px;
	overflow: hidden;
	border: 1px solid var(--bnd-line);
	border-radius: var(--bnd-radius);
	background: var(--bnd-card);
}

/*
 * Every row borrows the columns of the list itself through subgrid. Without it each
 * row is a grid of its own, the "auto" action column is sized per row, and a row
 * with one button pushes its type, size and date out of line with a row that has
 * two. With it, the widest set of buttons sizes the column for all rows, the way a
 * table would.
 */
.bnd-layout-list .bnd-library .bnd-grid__head,
.bnd-layout-list .bnd-library .bnd-grid__item,
.bnd-layout-list .bnd-library .bnd-card {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	/* Stated again on every level: a subgrid inherits the parent's gap only while its
	   own is "normal", and the card sets one of its own for the card view. */
	column-gap: 14px;
	align-items: center;
}

.bnd-layout-list .bnd-library .bnd-grid__head {
	padding: 9px 14px;
	border-bottom: 1px solid var(--bnd-line);
	background: var(--bnd-surface);
	color: var(--bnd-muted);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bnd-layout-list .bnd-library .bnd-card {
	height: auto;
	padding: 9px 14px;
	border: 0;
	border-bottom: 1px solid var(--bnd-line);
	border-radius: 0;
	transition: background-color 0.15s ease;
}

.bnd-layout-list .bnd-library .bnd-grid__item:last-child .bnd-card {
	border-bottom: 0;
}

.bnd-layout-list .bnd-library .bnd-card:hover {
	background: rgba(17, 62, 102, 0.025);
}

/* The format is already its own column; the glyph stays only as a colour cue. */
.bnd-layout-list .bnd-library .bnd-card__preview {
	--bnd-icon-size: 26px;

	width: 36px;
	height: 36px;
	margin: 0;
	border-radius: 6px;
}

.bnd-layout-list .bnd-library .bnd-card__pill,
.bnd-layout-list .bnd-library .bnd-card__meta {
	display: none;
}

.bnd-layout-list .bnd-library .bnd-card__title {
	margin: 0;
	font-size: 13px;
}

.bnd-layout-list .bnd-library .bnd-card__cell {
	display: block;
	color: var(--bnd-muted);
	font-size: 12px;
	white-space: nowrap;
}

.bnd-layout-list .bnd-library .bnd-card__cell--type {
	font-weight: 600;
	letter-spacing: 0.04em;
}

.bnd-layout-list .bnd-library .bnd-card__actions {
	justify-self: end;
	width: auto;
	margin-top: 0;
}

.bnd-layout-list .bnd-library .bnd-card__button {
	flex: 0 0 auto;
	padding: 6px 11px;
}

/* Narrower table: the glyph already tells the format, so that column goes first,
   and the buttons keep their icons while the words move to the tooltip. Size and
   date stay, since those are what was asked for. */
@container bnd-main (max-width: 700px) {
	.bnd-layout-list .bnd-library .bnd-grid {
		--bnd-list-cols: 50px minmax(0, 1fr) 72px 88px auto;
	}

	.bnd-layout-list .bnd-library .bnd-card__cell--type,
	.bnd-layout-list .bnd-library .bnd-grid__h--type {
		display: none;
	}

	.bnd-layout-list .bnd-library .bnd-card__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.bnd-layout-list .bnd-library .bnd-card__button {
		padding: 7px 10px;
	}
}

/* Phone width: columns no longer fit, so the facts go back under the name on one
   line, date included, and the buttons take a row of their own. */
@container bnd-main (max-width: 460px) {
	.bnd-layout-list .bnd-library .bnd-grid {
		--bnd-list-cols: 50px minmax(0, 1fr);
	}

	/* Room enough again for the words on full width buttons. */
	.bnd-layout-list .bnd-library .bnd-card__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.bnd-layout-list .bnd-library .bnd-grid__head,
	.bnd-layout-list .bnd-library .bnd-card__cell {
		display: none;
	}

	.bnd-layout-list .bnd-library .bnd-card {
		row-gap: 8px;
		padding: 11px 14px;
	}

	.bnd-layout-list .bnd-library .bnd-card__meta {
		display: block;
		margin: 2px 0 0;
	}

	.bnd-layout-list .bnd-library .bnd-card__meta-date {
		display: inline;
	}

	.bnd-layout-list .bnd-library .bnd-card__actions {
		grid-column: 1 / -1;
		justify-self: stretch;
	}

	.bnd-layout-list .bnd-library .bnd-card__button {
		flex: 1 1 0;
	}
}

/* ---------------------------------------------------------- theme overrides */

/*
 * The Elementor kit paints every link with the global accent colour through
 * `.elementor-kit-N a`, which is (0,1,1) and beats a single class of ours. Every
 * anchor in the library needs to say so louder, or the white label on the solid
 * button comes out accent red and unreadable.
 */
.bnd-library a.bnd-tree__link,
.bnd-library a.bnd-pager__link,
.bnd-library a.bnd-card__pill,
.bnd-single a.bnd-card__pill,
.bnd-library a.bnd-card__button,
.bnd-single a.bnd-card__button {
	color: var(--bnd-primary);
}

.bnd-library a.bnd-card__button--solid,
.bnd-single a.bnd-card__button--solid,
.bnd-library a.bnd-card__button--solid:hover,
.bnd-single a.bnd-card__button--solid:hover,
.bnd-library a.bnd-card__button--solid:focus,
.bnd-single a.bnd-card__button--solid:focus {
	color: #fff;
}

.bnd-library a.bnd-filters__clear {
	color: var(--bnd-muted);
}

.bnd-modal a.bnd-modal__open,
.bnd-inline.bnd-inline {
	color: var(--bnd-primary, #113e66);
}

/* currentColor drives the icons, so the label and the glyph never drift apart. */
.bnd-card__label {
	color: inherit;
}

/* ------------------------------------------------------------------ reader */

.bnd-modal {
	position: fixed;
	z-index: 10000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.bnd-modal[hidden] {
	display: none;
}

.bnd-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.bnd-modal__box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1000px, 100%);
	height: min(90vh, 100%);
	overflow: hidden;
	border-radius: var(--bnd-radius, 12px);
	background: #fff;
}

.bnd-modal__bar {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(17, 62, 102, 0.12);
}

.bnd-modal__title {
	margin: 0;
	color: #113e66;
	font-size: 15px;
}

.bnd-modal__tools {
	display: flex;
	gap: 14px;
	align-items: center;
}

.bnd-modal__open {
	font-size: 12px;
}

.bnd-modal__close {
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.bnd-modal__body {
	flex: 1 1 auto;
	background: #f1f3f5;
}

.bnd-modal__body iframe,
.bnd-modal__body img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
}

/* ------------------------------------------------------------------ single */

.bnd-single .bnd-card {
	max-width: 220px;
}

.bnd-inline {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 10px 14px;
	border: 1px solid rgba(17, 62, 102, 0.12);
	border-radius: 8px;
	color: #113e66;
	text-decoration: none;
}

.bnd-inline__badge {
	padding: 2px 8px;
	border-radius: 6px;
	background: #113e66;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.bnd-inline__size {
	font-size: 11px;
	opacity: 0.7;
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 880px) {
	.bnd-library {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.bnd-modal {
		padding: 0;
	}

	.bnd-modal__box {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
}