/**
 * Acresia Table Styles
 * Reusable table design for Joomla 6 frontend lists.
 * Load via WebAssetManager: $wa->registerAndUseStyle('tpl.acresia.table', 'media/templates/site/cassiopeia_acresia_tools/css/acresia-table.css');
 *
 * @package    cassiopeia_acresia_tools
 * @author     mcnezmo <nezmar@acresia.com>
 * @copyright  2026 ACRESIA Consulting
 */

/* ===================================================================
   Search bar (above table)
   =================================================================== */
.act-search-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.act-search-input-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	padding: 4px 10px;
	background: #fff;
	min-width: 220px;
}
.act-search-icon {
	color: #adb5bd;
	font-size: .85rem;
	flex-shrink: 0;
}
.act-search-input-wrap input {
	border: none;
	background: transparent;
	outline: none;
	font-size: .875rem;
	width: 100%;
	padding: 2px 0;
	color: #333;
}
.act-btn-clear {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	background: #f8f9fa;
	color: #495057;
	font-size: .875rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, border-color .15s;
}
.act-btn-clear:hover {
	background: #e9ecef;
	border-color: #adb5bd;
}

/* ===================================================================
   Add button (green)
   =================================================================== */
.act-btn-add,
a.act-btn-add,
a.act-btn-add:link,
a.act-btn-add:visited {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 10px 22px !important;
	background: #198754 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .15s;
	cursor: pointer;
}
.act-btn-add:hover,
a.act-btn-add:hover {
	background: #157347 !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* ===================================================================
   Table base
   =================================================================== */
.act-table-wrap {
	/* 2026-06-08 — fix phantom horizontal scrollbar across all list views.
	   Browsers report scrollWidth slightly > clientWidth (typ. 16–24 px) due to
	   subpixel rounding of column widths, even when no child visually overflows.
	   `overflow-x: auto` then renders a useless scrollbar (nothing to scroll to,
	   just steals vertical space). `clip` silently absorbs the subpixel overhang
	   without a scrollbar.
	   Mobile (<768 px) responsive block stacks rows via `data-label` so no
	   horizontal table → no need for scroll. Should a genuine wide-content list
	   view appear later, that view can re-enable scroll locally:
	     .scope-list-wrapper .act-table-wrap { overflow-x: auto; }
	*/
	overflow-x: clip;
	-webkit-overflow-scrolling: touch;
	padding: 0 8px;
	box-sizing: border-box;
}

.act-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
	line-height: 1.4;
	border-spacing: 0px 0;
}

/* Header */
.act-table thead th {
	background: #e8f5e2 !important;
	color: #2d4a22;
	font-weight: 600;
	font-size: .8rem;
	text-transform: none;
	padding: 10px 12px;
	border-bottom: 2px solid #c5ddb8;
	white-space: nowrap;
	vertical-align: middle;
}
.act-table thead th a {
	color: inherit;
	text-decoration: none;
}
.act-table thead th a:hover {
	text-decoration: underline;
}

/* Body rows */
.act-table tbody td {
	padding: 8px 12px;
	border-bottom: 1px solid #dee2e6 !important;
	vertical-align: middle;
	color: #333;
}
.act-table tbody tr:nth-child(even) {
	background: #fafcfa;
}
.act-table tbody tr:hover {
	background: #f0f5ee;
}

/* Truncation helper (add .act-truncate to td or inner div) */
.act-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

/* Expandable rows */
.act-table tbody tr.expanded td,
.act-table tbody tr.expanded .act-truncate {
	white-space: normal;
	overflow: visible;
	word-wrap: break-word;
	text-overflow: clip;
}

/* ===================================================================
   Pill badges (supporting asset tags, etc.)
   =================================================================== */
.act-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}
.act-pill {
	background: #e0e0e0;
	color: #333;
	font-size: .78rem;
	font-weight: 500;
	white-space: nowrap;
	display: inline-block;
	padding: 4px 6px;
	border-radius: 4px;
	font-size: 0.9em;
	text-align: center;
	background-color: #ddd;
}

/* ===================================================================
   Aspect cells (C  I  A  L) — each in its own <td>
   =================================================================== */
.act-table thead th.act-aspect-group {
	text-align: center;
	border-bottom: 1px solid #c5ddb8;
}
.act-table thead th.act-aspect-col {
	text-align: center;
	padding: 6px 1px;
	width: 37px !important;
	min-width: 37px !important;
	max-width: 37px !important;
}
td.act-aspect-cell {
	padding: 4px 1px !important;
	text-align: center !important;
	vertical-align: middle;
	width: 37px !important;
	min-width: 37px !important;
	max-width: 37px !important;
}
.pa-aspect-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 26px;
	border-radius: 14px;
	font-size: .78rem;
	font-weight: 600;
	color: #fff;
	padding: 0 6px;
	white-space: nowrap;
	box-sizing: border-box;
}
/* Center badge inside table cells */
td.act-aspect-cell .pa-aspect-badge {
	margin: 0 auto;
}
.pa-aspect-badge-zero {
	background: #e9ecef !important;
	color: #6c757d !important;
}

/* ===================================================================
   Asset link
   =================================================================== */
.act-asset-link {
	color: #0d6efd;
	text-decoration: none;
}
.act-asset-link:hover {
	text-decoration: underline;
}

/* ===================================================================
   Action buttons (edit / delete in last column)
   Uses BS5 btn btn-sm btn-outline-secondary (same as cards view).
   =================================================================== */
.act-actions {
	display: flex;
	gap: 6px;
	white-space: nowrap;
	flex-shrink: 0;
	justify-content: center;
}
.act-actions .btn {
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}

/* ===================================================================
   Bottom bar (add button left, pagination right)
   =================================================================== */
.act-bottom-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
	padding: 0 8px;
}
.act-bottom-left {
	flex-shrink: 0;
}
.act-bottom-right {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	font-size: .85rem;
	color: #6c757d;
}
.act-pagination-limit {
	display: flex;
	align-items: center;
	gap: 6px;
}
.act-pagination-limit label {
	white-space: nowrap;
	font-size: .85rem;
	color: #6c757d;
}
.act-pagination-limit select {
	padding: 4px 8px;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	font-size: .85rem;
	color: #333;
	background: #fff;
}

/* ===================================================================
   CSS tooltips (no JS dependency)
   =================================================================== */
[data-act-tooltip] {
	position: relative;
	cursor: help;
}
[data-act-tooltip]::after {
	content: attr(data-act-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: #333;
	color: #fff;
	font-size: .75rem;
	font-weight: 400;
	padding: 4px 10px;
	border-radius: 4px;
	/* Wrap long tooltips: short text stays on one line (max-content),
	   text > ~20 chars wraps within the narrow max-width box.
	   Narrow box keeps the tooltip from overflowing the viewport. */
	white-space: normal;
	max-width: 160px;
	width: max-content;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	text-align: left;
	line-height: 1.35;
	pointer-events: none;
	opacity: 0;
	transition: none;
	z-index: 100;
}
[data-act-tooltip]:hover::after {
	opacity: 1;
}
/* Inside thead, show tooltip below (above gets clipped by overflow-x:auto wrapper) */
.act-table thead [data-act-tooltip]::after {
	bottom: auto;
	top: calc(100% + 4px);
}

/* ===================================================================
   Responsive: stack on small screens
   =================================================================== */
@media (max-width: 768px) {
	.act-table-wrap {
		width: 100%;
		margin-left: 0;
		padding: 0;
	}
	.act-table thead {
		display: none;
	}
	.act-table tbody tr {
		display: block;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		margin-bottom: 8px;
		padding: 8px;
		background: #fff;
	}
	.act-table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 4px 0;
		border-bottom: none;
	}
	.act-table tbody td::before {
		content: attr(data-label);
		font-weight: 600;
		font-size: .78rem;
		color: #6c757d;
		margin-right: 8px;
		flex-shrink: 0;
	}
	.act-truncate {
		max-width: none;
	}
}

/* ===================================================================
   Global LIST VIEW full-width override (memory.md project rule)
   ===================================================================
   LIST VIEW = 100 % šířka. Cap 70 % platí POUZE pro edit/form views
   (.scope-form-wrapper). Wrapper třída pro list views je
   `.scope-list-wrapper`.

   Tento blok je loaded přes WebAssetManager (`tpl.acresia.table`),
   takže každý list view, který vrenderuje `<div class="scope-list-wrapper">`,
   dostane bulletproof full-width override AUTOMATICKY — bez per-view
   inline `<style>` patche.

   Defenzivní pravidla proti `plg_system_dc_jtable` (wrappuje tabulku do
   `.dc-jtable-wrapper` s `display:block; width:max-content` po
   `window.load`, což zužuje tabulku na obsah a způsobuje "flash plné
   šířky → shrink" defekt na >1500 px obrazovkách).
   ================================================================ */
.scope-list-wrapper {
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	min-width: 0;
}
.scope-list-wrapper > .act-cards-header,
.scope-list-wrapper > .act-table-wrap,
.scope-list-wrapper > .act-cards-grid,
.scope-list-wrapper > .act-bottom-bar,
.scope-list-wrapper > .act-kanban,
.scope-list-wrapper > .act-stats-row {
	max-width: none !important;
	width: 100% !important;
}
.scope-list-wrapper #adminForm,
.scope-list-wrapper form#adminForm {
	max-width: none !important;
	width: 100% !important;
	display: contents !important;
}
.scope-list-wrapper .act-table,
.scope-list-wrapper .dc-jtable-wrapper .act-table {
	width: 100% !important;
	min-width: 100% !important;
	display: table !important;
}
.scope-list-wrapper .dc-jtable-wrapper {
	width: 100% !important;
	max-width: none !important;
}
.dc-jtable-controls {
	display: none !important;
}

/* v1.0.X — GLOBAL belt-and-suspenders: i list views BEZ `.scope-list-wrapper`
   musí mít 100% šířku. Protect ALL `.act-table` (a jejich obal `.act-table-wrap`)
   proti plg_system_dc_jtable wrapování + inline minWidth, které šíří
   "shrink-to-content" defekt na >1500 px obrazovkách. Tyto pravidla platí
   bez ohledu na to, zda template volá `<div class="scope-list-wrapper">`. */
.act-table-wrap {
	width: 100% !important;
	max-width: none !important;
}
.act-table {
	width: 100% !important;
	min-width: 100% !important;
	display: table !important;
}
.dc-jtable-wrapper .act-table {
	width: 100% !important;
	min-width: 100% !important;
	display: table !important;
}
.dc-jtable-wrapper:has(> .act-table) {
	width: 100% !important;
	max-width: none !important;
}