/*
 * I-Soft File Manager: Foundation — Public Stylesheet
 *
 * Structural only — colors, fonts, and radii inherit from the active theme
 * wherever possible. All spacing and typography use em/rem so the widget
 * scales with the surrounding context.
 *
 * Responsive behavior uses @container queries (not media queries) so the
 * widget adapts to whatever container it's dropped into — full-width post,
 * narrow sidebar, two-column layout, etc. — independent of viewport size.
 * Pixel values are reserved for: hairline borders, tap-target minimums,
 * and dashicon glyph sizing.
 *
 * Customization: every color in this file is exposed as a `--isoft-fmf-*` CSS
 * custom property on `:root`. Override from Appearance → Customize →
 * Additional CSS — see readme.txt "Customizing appearance" for the full
 * list. The download button intentionally has no `--isoft-fmf-btn-*` vars so
 * theme `wp-element-button` styling stays in control.
 */

:root {
	/* Surfaces */
	--isoft-fmf-card-bg:        #fff;
	--isoft-fmf-card-border:    #e5e5e5;
	--isoft-fmf-row-border:     #f0f0f0;
	--isoft-fmf-title-band-bg:  #f6f7f9;

	/* Typography */
	--isoft-fmf-meta-color:     #666;
	--isoft-fmf-empty-color:    #888;

	/* HOT badge */
	--isoft-fmf-badge-hot-bg:    #e74c3c;
	--isoft-fmf-badge-hot-color: #fff;

	/* File-type colors — single source of truth for both list-mode tiles
	 * (.isoft-fmf-icon--*) and grid-mode badges (.isoft-fmf-meta--type.isoft-fmf-type--*). */
	--isoft-fmf-icon-color:    #fff;
	--isoft-fmf-icon-pdf-bg:   #c0392b;
	--isoft-fmf-icon-doc-bg:   #2980b9;
	--isoft-fmf-icon-xls-bg:   #27ae60;
	--isoft-fmf-icon-ppt-bg:   #e67e22;
	--isoft-fmf-icon-zip-bg:   #8e44ad;
	--isoft-fmf-icon-img-bg:   #16a085;
	--isoft-fmf-icon-vid-bg:   #2c3e50;
	--isoft-fmf-icon-aud-bg:   #d35400;
	--isoft-fmf-icon-file-bg:  #7f8c8d;
}

/* Establish the query container on the shortcode wrapper. Both the list/grid
 * shortcode and any direct .isoft-fmf-grid render become query containers. */
.isoft-fmf-list-wrap,
.isoft-fmf-grid,
.isoft-fmf-category-grid {
	container-type: inline-size;
}

/* Grid layouts — auto-fill so cells never stretch wider than a card. */
.isoft-fmf-grid { display: grid; gap: 1.5rem; }
.isoft-fmf-grid--cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.isoft-fmf-grid--cols-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.isoft-fmf-grid--cols-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%,  10rem), 1fr)); }

/* Download card — structural */
.isoft-fmf-download-card { display: flex; flex-direction: column; }
.isoft-fmf-download-card__thumbnail img { display: block; width: 100%; height: auto; }
.isoft-fmf-download-card__actions { margin-top: auto; padding-top: .75em; }

/* File list table */
.isoft-fmf-file-list { width: 100%; border-collapse: collapse; }
.isoft-fmf-file-list td,
.isoft-fmf-file-list th { padding: .5em .75em; text-align: left; }

/* Meta badges */
.isoft-fmf-meta { display: inline-flex; align-items: center; gap: .25em; }

/* ── Download card — JDownloads-style (list mode) ────────────────────────── */
.isoft-fmf-download-card {
	border-bottom: 1px solid var(--isoft-fmf-card-border, #e5e5e5);
	padding: .5em 0;
}
.isoft-fmf-download-card + .isoft-fmf-download-card {
	margin-top: 0;
}

/* Multi-file summary tile — renders the bundle as a single card the
   same visual shape as a single-file card. The icon column shows the
   file count instead of a type initial; the meta row shows aggregate
   info (count badge · types · date · total size · download count);
   the action band is the ZIP bundle button. The title links to the
   post permalink where individual files can be inspected. */
.isoft-fmf-file-item--summary .isoft-fmf-meta--types {
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--isoft-fmf-meta-color, #444);
}

/* "Download all" affordance above the file list on the expanded
   single-download page. */
.isoft-fmf-download-card__bundle-action {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 .75em;
}

.isoft-fmf-file-item {
	display: flex;
	align-items: center;
	gap: .75em;
	padding: .5em 0;
	border-bottom: 1px solid var(--isoft-fmf-row-border, #f0f0f0);
}
.isoft-fmf-file-item:last-child { border-bottom: none; }
.isoft-fmf-file-item--empty { color: var(--isoft-fmf-empty-color, #888); font-style: italic; }

/* File type icon (list mode) */
.isoft-fmf-file-item__icon {
	flex: 0 0 2.6em;
	width: 2.6em;
	height: 3.25em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	font-size: .625em;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--isoft-fmf-icon-color, #fff);
	background: var(--isoft-fmf-icon-file-bg, #7f8c8d);
	text-transform: uppercase;
}
.isoft-fmf-icon--pdf  { background: var(--isoft-fmf-icon-pdf-bg,  #c0392b); }
.isoft-fmf-icon--doc  { background: var(--isoft-fmf-icon-doc-bg,  #2980b9); }
.isoft-fmf-icon--xls  { background: var(--isoft-fmf-icon-xls-bg,  #27ae60); }
.isoft-fmf-icon--ppt  { background: var(--isoft-fmf-icon-ppt-bg,  #e67e22); }
.isoft-fmf-icon--zip  { background: var(--isoft-fmf-icon-zip-bg,  #8e44ad); }
.isoft-fmf-icon--img  { background: var(--isoft-fmf-icon-img-bg,  #16a085); }
.isoft-fmf-icon--vid  { background: var(--isoft-fmf-icon-vid-bg,  #2c3e50); }
.isoft-fmf-icon--aud  { background: var(--isoft-fmf-icon-aud-bg,  #d35400); }
.isoft-fmf-icon--file { background: var(--isoft-fmf-icon-file-bg, #7f8c8d); }

/* Info column — grows */
.isoft-fmf-file-item__info { flex: 1 1 auto; min-width: 0; }
.isoft-fmf-file-item__title {
	font-weight: 600;
	margin-bottom: .2em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.isoft-fmf-file-item__title a { text-decoration: none; }
.isoft-fmf-file-item__title a:hover { text-decoration: underline; }

/* Meta row */
.isoft-fmf-file-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1em;
	font-size: .8em;
	color: var(--isoft-fmf-meta-color, #666);
}
.isoft-fmf-file-item__meta .isoft-fmf-meta {
	display: inline-flex;
	align-items: center;
	gap: .2em;
}
.isoft-fmf-file-item__meta .dashicons {
	/* Dashicons are glyph-font; sizing in px keeps them crisp across scales. */
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 1;
}

/* Action column */
.isoft-fmf-file-item__action { flex: 0 0 auto; }

/* HOT badge */
.isoft-fmf-badge--hot {
	display: inline-block;
	padding: .1em .4em;
	font-size: .625em;
	font-weight: 700;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: .05em;
	background: var(--isoft-fmf-badge-hot-bg, #e74c3c);
	color: var(--isoft-fmf-badge-hot-color, #fff);
	vertical-align: middle;
	margin-left: .3em;
}

/* Agreement modal overlay — hidden by default, shown via .is-open */
.isoft-fmf-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	align-items: center;
	justify-content: center;
	z-index: 9999;
}
.isoft-fmf-modal-overlay.is-open {
	display: flex;
}
.isoft-fmf-modal {
	max-width: 38rem;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 2em;
}
.isoft-fmf-modal__license-text {
	max-height: 13rem;
	overflow-y: auto;
	padding: .75em;
	margin: 1em 0;
}

/* Download button — uses WP standard class; we only add structural tweaks */
.isoft-fmf-download-btn {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	width: fit-content;
	width: -moz-fit-content; /* Firefox < 94 */
}
.isoft-fmf-download-btn--restricted {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}
.isoft-fmf-download-btn--login {
	opacity: 0.85;
}

/* ── Grid-mode card variant ─────────────────────────────────────────────────
 * Portrait tile (1.5 : 2.7) with three fixed horizontal bands:
 *   [ title band    ] 30% — distinct background strip, 3-line clamp
 *   [ meta block    ] 55% — type badge + date + size + count, full-width
 *   [ action button ] 15% — full-width, text centered H+V
 * The file-type icon column is hidden in grid mode — its info moves into
 * the meta row as a colored badge so every meta value lines up uniformly.
 */
.isoft-fmf-grid .isoft-fmf-download-card {
	aspect-ratio: 1.5 / 2.7;
	border: 1px solid var(--isoft-fmf-card-border, #e5e5e5);
	border-radius: 4px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	background: var(--isoft-fmf-card-bg, #fff);
	display: flex;
	flex-direction: column;
}

.isoft-fmf-grid .isoft-fmf-file-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	border: none;
	flex: 1 1 auto;
	min-height: 0;
}

/* Hide the large colored file-type tile in grid mode. */
.isoft-fmf-grid .isoft-fmf-file-item__icon { display: none; }

/* The info wrapper holds the title band + meta block. */
.isoft-fmf-grid .isoft-fmf-file-item__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 0;
}

/* ── Title band ── 30% of card height, visually distinct strip. */
.isoft-fmf-grid .isoft-fmf-file-item__title {
	flex: 0 0 30%;
	width: 100%;
	padding: .8em 1em;
	margin: 0;
	background: var(--isoft-fmf-title-band-bg, #f6f7f9);
	border-bottom: 1px solid var(--isoft-fmf-card-border, #e5e5e5);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.3;
	box-sizing: border-box;
	overflow: hidden;

	/* Override the list-mode single-line truncation. */
	white-space: normal;
	text-overflow: clip;
	word-break: break-word;

	/* 3-line clamp on the block itself — works whether the content is a
	 * bare text node or an inline <a> / <span>. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}
.isoft-fmf-grid .isoft-fmf-file-item__title a { color: inherit; text-decoration: none; }

/* ── Meta block ── Fills remaining vertical space, one value per line. */
.isoft-fmf-grid .isoft-fmf-file-item__meta {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5em;
	padding: 1em;
	font-size: .95em;
	color: var(--isoft-fmf-meta-color, #666);
	margin: 0;
}
.isoft-fmf-grid .isoft-fmf-file-item__meta .isoft-fmf-meta { font-size: inherit; }
.isoft-fmf-grid .isoft-fmf-file-item__meta .dashicons {
	/* Larger dashicons in grid mode — still glyph-font so still px. */
	font-size: 18px;
	width: 18px;
	height: 18px;
}
.isoft-fmf-grid .isoft-fmf-meta--lock { align-self: flex-end; }

/* File-type badge — grid-only. In list mode the big colored icon tile on
 * the left already conveys the file type, so we hide this duplicate badge
 * everywhere except inside .isoft-fmf-grid.
 *
 * The hide rule has to match the specificity of .isoft-fmf-file-item__meta
 * .isoft-fmf-meta (2 classes) or it loses. The show rule + the type-color rules
 * share the same base specificity so the cascade order decides — colors
 * declared last, they win. */
.isoft-fmf-file-item__meta .isoft-fmf-meta--type { display: none; }
.isoft-fmf-grid .isoft-fmf-file-item__meta .isoft-fmf-meta--type {
	display: inline-block;
	padding: .2em .6em;
	font-size: .85em;
	font-weight: 700;
	letter-spacing: .05em;
	border-radius: 3px;
	color: var(--isoft-fmf-icon-color, #fff);
	text-transform: uppercase;
}
.isoft-fmf-grid .isoft-fmf-meta--type.isoft-fmf-type--pdf  { background: var(--isoft-fmf-icon-pdf-bg,  #c0392b); }
.isoft-fmf-grid .isoft-fmf-meta--type.isoft-fmf-type--doc  { background: var(--isoft-fmf-icon-doc-bg,  #2980b9); }
.isoft-fmf-grid .isoft-fmf-meta--type.isoft-fmf-type--xls  { background: var(--isoft-fmf-icon-xls-bg,  #27ae60); }
.isoft-fmf-grid .isoft-fmf-meta--type.isoft-fmf-type--ppt  { background: var(--isoft-fmf-icon-ppt-bg,  #e67e22); }
.isoft-fmf-grid .isoft-fmf-meta--type.isoft-fmf-type--zip  { background: var(--isoft-fmf-icon-zip-bg,  #8e44ad); }
.isoft-fmf-grid .isoft-fmf-meta--type.isoft-fmf-type--img  { background: var(--isoft-fmf-icon-img-bg,  #16a085); }
.isoft-fmf-grid .isoft-fmf-meta--type.isoft-fmf-type--vid  { background: var(--isoft-fmf-icon-vid-bg,  #2c3e50); }
.isoft-fmf-grid .isoft-fmf-meta--type.isoft-fmf-type--aud  { background: var(--isoft-fmf-icon-aud-bg,  #d35400); }
.isoft-fmf-grid .isoft-fmf-meta--type.isoft-fmf-type--file { background: var(--isoft-fmf-icon-file-bg, #7f8c8d); }

/* ── Action band ── 15% of card height, full width, text centered. */
.isoft-fmf-grid .isoft-fmf-file-item__action {
	flex: 0 0 15%;
	/* Tap-target minimum per WCAG 2.5.5 — must be px. */
	min-height: 44px;
	display: flex;
	margin: 0;
	padding: 0;
}
.isoft-fmf-grid .isoft-fmf-file-item__action .isoft-fmf-download-btn {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border-radius: 0;
	line-height: 1;
	text-align: center;
}

/* ── Container queries ─────────────────────────────────────────────────────
 * Narrow containers (sidebars, two-column layouts, mobile viewports) get
 * a single-column grid and release the portrait aspect lock so cards size
 * to their content.
 */
@container (max-width: 30rem) {
	.isoft-fmf-grid--cols-2,
	.isoft-fmf-grid--cols-3,
	.isoft-fmf-grid--cols-4 { grid-template-columns: 1fr; }

	.isoft-fmf-grid .isoft-fmf-download-card   { aspect-ratio: auto; }
	.isoft-fmf-grid .isoft-fmf-file-item__title  { flex: 0 0 auto; }
	.isoft-fmf-grid .isoft-fmf-file-item__meta   { flex: 0 0 auto; padding: 1em; }
	.isoft-fmf-grid .isoft-fmf-file-item__action { flex: 0 0 auto; min-height: 48px; }
}

/* List-mode file row: collapse action column onto its own row when
 * the container is tight (e.g. dropped in a sidebar). */
@container (max-width: 22rem) {
	.isoft-fmf-file-item { flex-wrap: wrap; }
	.isoft-fmf-file-item__action { width: 100%; }
	.isoft-fmf-download-btn { width: 100%; justify-content: center; }
}

/* List table: stack rows vertically in very narrow containers. */
@container (max-width: 22rem) {
	.isoft-fmf-file-list thead { display: none; }
	.isoft-fmf-file-list td    { display: block; padding: .25em .5em; }
}

/* Missing file state — flagged by integrity check */
.isoft-fmf-file-item--missing { opacity: .55; }
.isoft-fmf-file-item--missing .isoft-fmf-file-item__title,
.isoft-fmf-file-item--missing .isoft-fmf-file-item__meta { text-decoration: line-through; }
.isoft-fmf-file-missing-label {
	display: inline-block;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 500;
	color: #8a6d00;
	background: #fff8e1;
	border: 1px solid #dba617;
	border-radius: 3px;
}