/* Item table (Excel-like) styles */
:root{--tbl-bg:#f8fafb;--tbl-panel:#ffffff;--tbl-accent:#2aa198;--tbl-accent-2:#4fd1c5;--tbl-muted:#6b7280}
.item-table-modal{position:fixed;inset:0;z-index:12000;display:none;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,rgba(2,6,23,0.6),rgba(2,6,23,0.6));overflow:auto}
.item-table-modal.open{display:flex}
.item-table-panel{width:90%;max-width:1400px;background:var(--tbl-panel);border-radius:12px;box-shadow:0 8px 40px rgba(2,6,23,0.6);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 48px)}

/* When rendered inline inside the standalone page root, make the panel span full width */
#item-table-root .item-table-panel{
	width:100%;
	max-width:none;
	margin:0;
	border-radius:8px;
	box-shadow:none;
	max-height:none;
}

/* Standalone page: make the panel fill available viewport height and let only the body scroll */
/* `.page-wrap` is the container below the header; size it to viewport minus header height */
.page-wrap{
	height: calc(100vh - 70px);
	overflow: hidden;
    box-sizing: border-box; /* include padding in height calculation to avoid overflow */
}
#item-table-root{
	display:block;
	height: 100%; /* fill .page-wrap */
	overflow: hidden;
}
#item-table-root .item-table-panel{
	display:flex;
	flex-direction:column;
	height: 100%; /* fill root */
	overflow: hidden;
}
#item-table-root .item-table-body{
	/* allow only the body to scroll while headers stay sticky */
	flex: 1 1 auto;
	overflow: auto;
	padding: 12px 16px 80px 16px; /* extra bottom padding (doubled) */
}
#item-table-root .item-table-header{ position:relative; z-index:2 }
#item-table-root .table thead th{ position:sticky; top:0 }
.item-table-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #eef2f7;background:linear-gradient(90deg,#fbffff,#f4fbfb)}
.item-table-title{font-size:1.25rem;color:var(--tbl-accent);font-weight:700}
.item-table-controls{display:flex;gap:10px;align-items:center}
.btn-tbl{background:#fff;border:1px solid #e6eef0;padding:8px 12px;border-radius:8px;cursor:pointer;color:#1f2937}
.btn-tbl.primary{background:linear-gradient(180deg,#2aa198,#2bb7a7);color:white;border:0}
.btn-tbl.ghost{background:transparent;border:0;color:var(--tbl-accent)}
.item-table-body{padding:12px 16px;overflow:auto}
.table{width:100%;border-collapse:collapse;font-family:Inter,Segoe UI,Arial,sans-serif}
.table thead th{position:sticky;top:0;background:#ffffff;border-bottom:2px solid #e6eef0;padding:10px;font-weight:700;color:#0b3b38;text-align:left}
.table thead th.sort-asc::after{content:' ▲';font-size:0.8rem;color:#0b776f}
.table thead th.sort-desc::after{content:' ▼';font-size:0.8rem;color:#0b776f}
.table thead th:nth-child(5), .table thead th:nth-child(6), .table thead th:nth-child(7){text-align:left}
.table tbody td{padding:10px 14px;border-bottom:1px solid #f0f5f6}

/* Add extra horizontal spacing for key columns (Id / Name / Code and Price/VAT) */
.table tbody td:nth-child(1), .table tbody td:nth-child(2), .table tbody td:nth-child(3),
.table tbody td:nth-child(5), .table tbody td:nth-child(6){
	padding-right:20px;
}
.table input[type=text], .table input[type=number], .table select{width:100%;padding:8px;border-radius:6px;border:1px solid #e2eaec;background:#fff}
.table .small{max-width:90px}
.table .price{background:#f0f9f8;border-radius:8px;padding:6px 10px;text-align:right}
.table .actions{display:flex;gap:8px}
.tag-chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mini-chip{background:#eef7f6;padding:4px 8px;border-radius:12px;font-size:12px;color:#0b3b38;border:1px solid rgba(11,59,56,0.06)}
.item-tag-editor .tag-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:18px;background:#fff;border:1px solid #e6eef0;margin-right:6px}
.item-tag-editor .tag-del{border:0;background:transparent;cursor:pointer;color:#c0392b}

/* Tag indicator button shown in table rows */
.tag-indicator{background:transparent;border:1px solid #e6eef0;padding:6px 10px;border-radius:8px;cursor:pointer;color:#0b3b38}
.tag-indicator.has-tags{background:linear-gradient(180deg,#e8fffa,#f2fff9);border-color:#2aa198;color:#0b776f;font-weight:700}
.te-suggestions{display:flex;flex-wrap:wrap;gap:8px}
.te-sugg{background:#fff;padding:6px 10px;border-radius:14px;border:1px solid #e6eef0;cursor:pointer}
.te-sugg:disabled{opacity:0.6;cursor:default}
.te-sugg .te-match{background:transparent;color:#0b776f;font-weight:700}
.te-sugg:hover{background:#e9f7f4;border-color:#2aa198}
.te-sugg--active{background:#2aa198;color:#fff;border-color:#2aa198}
.te-sugg--active .te-match{color:#fff}
.row-add{display:flex;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid #eef2f7;background:#fbffff}
.hint{font-size:0.9rem;color:var(--tbl-muted)}
/* responsive */
@media (max-width:900px){.item-table-panel{width:98%;height:94vh}.item-table-body{padding:10px}}